|
CSS - Columns Help
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. 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 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. 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 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? 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>
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. :-) 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, 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 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 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 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 currently have the following layout in a fieldset: [IMG]EDIT: I'll just go ahead and make some spam posts now so I can post an image link[/IMG] Please ignore the language. What I basically want to achieve is making the radio buttons align to the right and the labels to the left. The source for this is like this: html4strict Code: Original - html4strict Code <fieldset> <legend>Beantwoord a.u.b. met helemaal oneens tot helemaal eens</legend> <ol> <li> <label for="q0">Question1</label> <input type="radio" id="q0" name="q0" value="1">1</input> <input type="radio" id="q0" name="q0" value="2">2</input> <input type="radio" id="q0" name="q0" value="3" checked="true">3</input> <input type="radio" id="q0" name="q0" value="4">4</input> <input type="radio" id="q0" name="q0" value="5">5</input> <input type="hidden" name="qid0" value="4" /> </li> <li> <label for="q1">Question2</label> <input type="radio" id="q1" name="q1" value="1">1</input> <input type="radio" id="q1" name="q1" value="2">2</input> <input type="radio" id="q1" name="q1" value="3" checked="true">3</input> <input type="radio" id="q1" name="q1" value="4">4</input> <input type="radio" id="q1" name="q1" value="5">5</input> <input type="hidden" name="qid1" value="6" /> </li> <li> <label for="q2">Question3</label> <input type="radio" id="q2" name="q2" value="1">1</input> <input type="radio" id="q2" name="q2" value="2">2</input> <input type="radio" id="q2" name="q2" value="3" checked="true">3</input> <input type="radio" id="q2" name="q2" value="4">4</input> <input type="radio" id="q2" name="q2" value="5">5</input> <input type="hidden" name="qid2" value="7" /> </li> <li> <label for="q3">Question4</label> <input type="radio" id="q3" name="q3" value="1">1</input> <input type="radio" id="q3" name="q3" value="2">2</input> <input type="radio" id="q3" name="q3" value="3" checked="true">3</input> <input type="radio" id="q3" name="q3" value="4">4</input> <input type="radio" id="q3" name="q3" value="5">5</input> <input type="hidden" name="qid3" value="24" /> </li> <li> <label for="q4">Question5</label> <input type="radio" id="q4" name="q4" value="1">1</input> <input type="radio" id="q4" name="q4" value="2">2</input> <input type="radio" id="q4" name="q4" value="3" checked="true">3</input> <input type="radio" id="q4" name="q4" value="4">4</input> <input type="radio" id="q4" name="q4" value="5">5</input> <input type="hidden" name="qid4" value="40" /> </li> </ol> </fieldset> <fieldset> I already tried making them float but this kinda messed everything up as some questions are multi-line. Is the best way to do this separating the labels and inputs into two floating divs or is there a way that would look cleaner code-wise? Tim Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers 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. The right column of this website just started appearing in the wrong place, as you can see he [deleted] Unfortunately, i did not make the site but have been asked to fix it. I cant seem to find the cause of this at all, any help would be great, thanks! Edit: Found the mistake, a WYSIWYG field in the admin that shows on the header was screwing up the page with invalid code. I am redesigning my site, changing it from 2 columns to 3. I can't seem to get the 3rd column where I want it. See: http://www.jwsuretybonds.com/jw09/surety-bonds/commercial-bonds/ My goal is to make the grey "Get Started Now" box to the far right, the text in the center, and the nav buttons to the left. Is it possible to do this by only modifying the CSS? If I have to change the HTML it will create a TON of work in recoding my templates. Sorry for the vague subject line, but it's difficult to summarize. Disclaimer: I am not a designer, just a programmer trying to get a rough layout so the client can see how things will work, which can then be turned over to someone who will make it look nice. My usual solution is to use tables, but that won't work for this! Basically I want a number of lines running down the page, each line having a check box, radio button or nothing in the left column, and text in the right. Each line will have a varying indent level. The text may be lengthy and wrap, and I want it to stay within its own cell when it does. Like a table. But I can't really get it to do the indenting the way I want. I could probably get it to work, but it would be really, really kludgy, and I do have some pride! I put it in DIVs, like this: Code:
<HTPEACH DATASET="Ratings">
<DIV CLASS="Container {{ds_Indent}}">
<DIV CLASS="Block1"><HTPTAG NAME="ds_Field"></DIV>
<DIV CLASS="Block2">{{ds_Text}}</DIV>
</DIV>
</HTPEACH>
If I float Block1 left and Block2 right and give them widths, it works except that Block 2 is still lower than Block1. So I look into positioning. To make a long story short, what I end up with is this: Code:
.Container {
width: 650px;
position: relative;
}
.Block1 {
float: left;
width: 25px;
border: 1px solid navy;
}
.Block2 {
float: right;
width: 625px;
position: absolute;
top: 0;
left: 25px;
border: 1px solid navy;
}
Which, of course, ends with everything at the top of the page, all overlapping. Reading a little more, I can see why, but now I'm stumped. |
|||||||