|
CSS - Setting Up Three Div Columns
Hi,
I'm trying to set up three div's as columns, where the left and right divs adjust their width as the page shrinks/expands and the centre div has a fixed width of, say 400px. Also, the left and right div's must be smaller (height wise) to the centre div, but all need to align at the bottom. I've tried the following set up, but it doesn't do what I want... Code:
.centre
{
float: left;
width: 400px;
height: 60px;
border-bottom: 1px solid #000000;
}
.left, right
{
float: left;
width: auto;
height: 30px;
border-bottom: 1px solid #000000;
}
.right
{
clear: right;
}
...
<div class="left">
</div>
<div class="right">
center text
</div>
<div class="right">
</div>
Any guidance on this would be appreciated Thanks for your time. 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 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! Notice on NZBMatrix.com on the left hand side, it looks as if there were multiple boxes where normally just one navigation box would exist in a three-column layout. I already know how to do a three-column layout, but my question is, are there several different columns on the left of this website, or is it just one column with several sections defined by borders? Thank you for any advice. 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;
}
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. 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 Hi, im kind of new to css and im trying to find the most effective way to organize content into 4 columns, I need the columns to be fixed of about 175px, is it possible to use list for this? Never Mind, I got it, I just discovered what "clear:" does 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. http://jordanmeeter.com/?page=about How would I make it so the left and right columns increase in height as the content gets taller and taller? Thanks. :-) Just wondering is it a good way to do columns in css using two spans set to float left and then right and having their widths set, then the content in divs or spans inside them? 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 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>
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> i have 2 columns contained in a holder. the rite hand column comes below the left in iE...and looks fine in firefox, sorry i cant upload it...i have no hosting for a bit heres the html, and css: Hi all, I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
<!--
body, html{
height:100%;
text-align:center;
margin:0px;
padding:0px;
}
#main,#header,#footer,#cleaner{
margin-left:auto;
margin-right:auto;
width:750px;
text-align:left;
}
#main{
/*this height is for ie only*/
height:100%;
min-height:100%;
margin-bottom:-50px;
}
/*ie wont see this, other browsers will*/
body>div#main{
height: auto;
}
#header, #footer,#cleaner{
height:50px;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<?
include ('include/head.php');
?>
</head>
<body>
<div id="main">
<div id="header">
<?
include ('include/top_nav.php');
?>
</div>
<?
include ('return_policy.php');
?>
<div id="cleaner"></div>
</div>
<div id="footer">
<?
include ('include/footer.php');
?>
</div>
</body>
</html>
It appears to have two columns either side but i can't add anything to them. Can anyone tell me how i might be to add a background image? Cheers, camcim Hello, Im new to CSS, im wondering if its possible to write a CSS to display items in the same way as a table with 2 columns. for example: Code: <table width="438" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="93" align="right"><strong>Key:</strong></td>
<td width="325">Element</td>
</tr>
</table>
Hello all... I need to have one of my div's of my layout contain two separate columns. My layout has 3 columns and in the center main content column I need to split it in half to display list items. Part of a sitemap. I have this and it is not working. The boxes are working and in the proper horizontal alignment but they are not equal vertically. Ideas? Code: <div id="contentcenter"> <div style="background-color: #006666; float:left; width: 185px; "> <p>testing</p> </div> <div style="background-color: #000000; margin-left: 189px; width: 185px; "> <p>testing</p> </div> </div> Hi guys! I am looking for the sort of solution ive listed below but i've played about using the <li> tags and cannot seem to pull it off. The sort of information I work with if I was to use this on a live role out would be rows of information with columns which is often alot of code and takes ages to load up hence I thought I would look into the CSS. I cannot seem however to produce something which would for eg be about 5 columns across and 10 rows down just for testing. I like to alter the row styles so that they can be distinguished easier as do many sites. Often for my information there are about 50 rows and that adds up to alot of download time which I would like to bring down. Anybody got any eg's or is it not possible? I am struggling with this one. Thanks in advance. http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done? I used float:right; and float:left for starters but I can not get the columns any closer to each other. Any help is greatly appreciated, - mike |
|||||||