|
CSS - Two Columns Layout
Hello,
I am looking for a CSS two fixed width columns centered layout with header and footer. Could someone recommend me a good one? Thank You, Miguel Similar TutorialsHello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi ya My goal is to get this page: portfolio.modernmusicians.com/portfolio.html to have the layout like this: portfolio.modernmusicians.com/port_goal.gif Notice how "description" is squared up in the image. I'm not sure if I should make nested div's or use margins or padding or what. Any guidance would be greatly appreciated. Thanks. Hello, To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully. What would be the best technique for liquid layouts? I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux? Any suggestions? I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns. Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall. I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom. Code: <html >
<head>
<title>Untitled Page</title>
<style type="text/css">
html {
overflow-y: scroll; /* forces firefox scrollbar on */
}
body {
margin: 0;
padding: 0;
background: #F2F2F2;
font: 100% Helvetica, Arial, sans-serif;
height: 100%;
}
/* text-align: center; is so that the content will float in the center*/
div.wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: left;
margin-bottom: 42px;
}
div.header {
position: relative;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.footer {
position: absolute; bottom: 0;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.wrapper .left {
width: 215px;
float: left;
background: yellow;
height: 100%;
min-height: 100%;
}
div.wrapper .right {
width:auto;
margin-left: 215px;
}
div.wrapper .tabs {
background: green;
height: 35px;
}
div.wrapper .mainContent {
}
</style>
</head>
<body>
<div id="header" class="header">header</div>
<div class="wrapper">
<div id="leftColumn" class="left">left content</div>
<div class="right">
<div class="tabs">Tabs go here</div>
<div class="mainContent">Main content goes here</div>
</div>
</div>
<div id="footer" class="footer">footer</div>
</body>
</html>
Any help would be appreciated thanks in advance. Risso Hi, Creating a Wordpress theme. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html. Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little. ----------------- HEADER DIV------------------------------------------ -- Sidebar Div-- __________ --- RIGHT DIV (not floated) ----------------- FOOTER DIV ---------------------------------------- (property of footer is set to clear:both) SIDEBAR DIV is float:left; width 160px RIGHT DIV is not floated, and contains all the content. 600px; Problem I need to solve: In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it). *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page. So it looks like this: ___ HEADER ____ Sidebar __________________ Thumbnail #1: Text text text (clear:left clears everything....) __________________________ Thumbnail #2: Text ---- FOOTER --- Attempted solution: If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div. Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated. I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Hi, I am looking to retrieve content from a database (that part I can handle) and then output it to the browser, but my css is poor. I want to create a two column format, which I am ok with using two div's in using absolute positioning in a relative frame, but that doesn't allow content to flow. I am looking for text that flows from the fixed bottom of the first column to the top of the second. If there is a way to do this, or anyone can point me to any resources, I'd appreciate it. Thanks Have a little problem with the 3-column layout. I'm converting it down to 2-column, which should be easier. However, in all exampels I've seen, there is no need to assign height, and all of the column divs always stay the same height. I can't seem to duplicate this. Here's what I have: PHP Code: <div id="leftCol"> <p>crap</p> <p>crap</p> <p>crap</p> <p>crap</p> <p>crap</p> </div> <div style="width: 200px;"> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> <p>more content</p> </div> <div class="clear"> </div> and the relevant CSS: PHP Code: .clear{ /* clearing element for floats */ font-size: 0px; /* for weird IE */ height: 0px; width: 0px; clear: both; } div{ margin: 0px; padding: 0px; border: 0px black solid; } #leftCol{ width: 100px; border: 5px #000077 solid; border-top: 0px #000077 solid; margin: 0px; padding: 0px; float: left; } * html #leftcol{ /* Tan Box Hack */ width: 104px; width: 100px; } IE likes it (IE likes just about anything), but the "more content" text gets wrapped around the "leftCol" in Firefox. Any suggestions to what I'm missing? Thanks! Hi I am new to css and am trying to use the following code to make a page. i cant seem to position the content on the right of the left nav. i want it so that the content div resizes and stays in the same position when the browser is resized but the leftnav stays in the same position and doesnt re size....any help would be appreciated. third.css body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { margin-top: 50px; margin-left: 50px; margin-right: 50px; margin-bottom: 50px; padding: 0px; background-color: orange; width: 80%; min-width: 181px; } #footer { padding: 0px; position: relative; padding: 0px; background-color: yellow; width: 100%; } #content { left:200px; width:100%; background-color: red; } #leftnav { /*sets properties for the left nav bar*/ background-color : #66ccff; width: 180px; } third.html <div id="container"> container <div id="leftnav">left nav</div> <div id="content">content content content content content content content content content content content content content content content content content content </div> <div id="footer">footer</div> </div> Hi, I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column. PHP Code: <div id="container"> <div id="leftcolumn"> <div id="leftcolumntop"> aaaa </div> <div id="leftcolumnbottom"> bbb </div> </div> <div id="rightcolumn"> <div id="rightcolumntop"> ccc </div> <div id="rightcolumnbottom"> ddd </div> </div> </div> So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time. The columns work, however underneath the selected item, a gap forms. But only on the first 2/3 columns. Why? How can i stop it? Sorry about the messiness of the HTML code, it is dynamically created so readability in source code of page was not thought about! Sometimes you will be able to see it on my testing server. Screenshots for when my server is not online are attached. CSS: css Code: Original - css Code #listview { position:absolute; top:122px; left:273px; border:solid 2px #000; height:412px; width:694px; padding-top:15px; overflow:scroll; } #listview li { background-position:left center; background-repeat:no-repeat; border-left:1px solid #000; border-right:1px solud #000; float:left; height:80px; width:150px; overflow:hidden; margin:10px; text-align:center; }
HTML: html4strict Code: Original - html4strict Code <div id="listview"><ul id="listview_ul"><li class="selected" style="background-image: url(.images/ext/txt.gif);" id="40b65fa114057838a74dc7a4b630c36a" onclick="javascript:getDetails(this,'FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt')">FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt <input id="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" value="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="777468c20ef558d02fac83c104f69389" onclick="javascript:getDetails(this,'U GOT TOLD!.txt')">U GOT TOLD!.txt <input id="U GOT TOLD!.txt" value="U GOT TOLD!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/genericBlue.gif);" id="9eee28d877a7f1616a57e8a52165d99a" onclick="javascript:getDetails(this,'U GOT TOLD.txt111')">U GOT TOLD.txt111 <input id="U GOT TOLD.txt111" value="U GOT TOLD.txt111" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD.txt111" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="5dd99cc991e032ee43afd619fa300157" onclick="javascript:getDetails(this,'You get a message if you dont put any content. Solved now.txt')">You get a message if you dont put any content. Solved now.txt <input id="You get a message if you dont put any content. Solved now.txt" value="You get a message if you dont put any content. Solved now.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/You get a message if you dont put any content. Solved now.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="a120c2992faa1a664a87378674340f0c" onclick="javascript:getDetails(this,'hahahah.txt')">hahahah.txt <input id="hahahah.txt" value="hahahah.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/hahahah.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/php.gif);" id="828e0013b8f3bc1bb22b4f57172b019d" onclick="javascript:getDetails(this,'index.php')">index.php <input id="index.php" value="index.php" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/index.php" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="e4c275a9e3ae1a0ac717c02826694d61" onclick="javascript:getDetails(this,'it works.txt')">it works.txt <input id="it works.txt" value="it works.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/it works.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="872002aaa5df50c813fd3443dc0bf561" onclick="javascript:getDetails(this,'lol.txt')">lol.txt <input id="lol.txt" value="lol.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/lol.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/exe.gif);" id="aeee850280b2d24f213678fe7ca9bc0b" onclick="javascript:getDetails(this,'look at da preety icons.exe')">look at da preety icons.exe <input id="look at da preety icons.exe" value="look at da preety icons.exe" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/look at da preety icons.exe" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li></ul></div>
I'm building a CSS web site and the main body of the page has a left column containg navigation and then the content on the right. What I want to have is that the height of the smallest of the 2 columns to equal that of the the highest, currently the navigation either runs over the borders of the actual box, or the text from the right column undercuts the navigation column. To see what I mean see www.twstd.net/future/. Hoiw can I prevent the above display issues? Thanks. I am trying to create a page with two side by side boxes, each coloured differently, and a third box, the full width of the page, directly underneath the other 2. The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box. If I define 1 of the boxes as 49.9% they appear side by side with a small strip between them. The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen. Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each. Here is the code: Code: .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}
.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}
.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}
.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}
Hi, i tried to change this blogger theme from 2 to 3 columns... but when done .... the menu bar on sidebar disapear... Can you help me?... for you I don't think is so difficult; I'm not a web designer but a system administrator... so, is not so easy. This is the link where you can find the xml. plantillasblogyweb.googlepages.com/Blogy-iPlantilla-Blogyweb.blogspot.c.xml Thank you in advance Surfparadise |
|||||||