|
CSS - Clear:both Problem In 3 Column Layout
I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs.
wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/ and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/ As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both Any suggestions will be appreciated as I've exhausted my skills on this one. Similar Tutorialswww.asticafe.com Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse. Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! I'm working on site with some main containers and a 3-column content area inside the containers. The middle column on IE win is getting bumped down below the left column when it should be aligned to top. I'm kind of a novice so I have no idea what's going on. Can anybody help? Here are my files: http://www.artesiandesigngroup.com/westcoastpipe/grid.html http://www.artesiandesigngroup.com/westcoastpipe/includes/main.css Code: body {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
text-align: center;
margin: 0; padding: 0; }
/*** outside wrapper including fading background ***/
#container {
position: relative;
margin: auto;
text-align: center;
width: 840px;
background: url(../images/layout/bg_page.gif) repeat-y center top; }
/*** actual container ***/
#pagesize {
margin: auto;
text-align: center;
width: 800px;
background-color: #9B9EA0;
border: 1px solid #fff;
border-bottom: none; }
/*** row 1 - top ***/
#header {
background-image: url(../images/layout/header.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
padding: 0;
width: 800px;
height: 252px;
border-bottom: 1px solid #fff; }
/*** Nav inside header ***/
#topnav {
position: relative;
top: 150px;
width: 800px;
height: 102px;
margin: 0; padding: 0;
background-color: #005195;
color: #fff;
font-size: .7em;
}
#topnav ul {
margin: 0; padding: 0; }
#topnav li {
text-transform: uppercase;
display: inline;
list-style-type: none;
margin: 0; padding: 2px 4px;
vertical-align: middle;
border-right: 1px solid #fff; }
/*** row 2 - middle ***/
#content {
background: url(../images/layout/bg_content.gif) repeat-y center top;
background:color: #fff;
border: 1px solid #fff;
border-bottom: none;
margin: 30px 30px 0 30px;
padding: 0;
text-align: left; }
/*** column 1 - left ***/
#sidebarphotos {
float: left;
margin: 0; padding: 0;
width: 161px;
font-size: .8em; }
/*** column 3 - right ***/
#sidenav {
margin: 0; padding: 0;
float: right;
width: 170px;
background-color: #555;
font-size: .8em;
color: #ddd; }
/*** column 2 - center ***/
#textarea {
width: 395px;
margin: 0; padding: 0;
margin-right: 170px;
margin-left: 169px;
background-color: #fff;
font-size: .9em;
vertical-align: top; }
/*** header for textarea ***/
#contentheader {
margin: 0;
padding: 4px 8px;
vertical-align: middle;
background: #dff url(../images/layout/bg_contentheader.jpg) repeat-y left top;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
color: #005195;
line-height: 1em;
border-bottom: 1px solid #555;
}
/*** row 3 - bottom ***/
#footer {
width: 800px;
margin: 0;
padding: 2px 0;
background-color: #005195;
font-size: .6em;
color: #fff;
border-top: 1px solid #fff;
border-bottom: none;
letter-spacing: .1em;
}
Thanks in advance! I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck. Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad i want 2 columns side by side:css is as below. it seems the 2nd column is displayed below the first column.wat can be done to avoid this. div#column1 { margin-left: 150px; width: 70px; height: 500px; background: #CCCCFF; color: blue;} div#column2 { margin-left: 250px; color: black; background: blue; } I have a two column, three row layout for my website. I'm having problems where my left column is longer than the middle "main" content, and when that happends it overlaps my footer instead of pushing it down. Would someone mind looking at my html/css and tell me how I can fix this issue? Link: http://mividdesigns.com/csshelp.html By the way, it works/looks fine in FF, but I have problems in IE. Thank You! Hi, I have a 4 column layout, all the columns have percentage widths at the moment but I want the 3rd column to be fixed width. I can't seem to figure out how I can have columns 1,2 and 4 fluid and fit the page, whilst having column 3 fixed width. Code: ________________________________________________ | expand | expand | fixed | expand | | | | width | | | | | | | | | | | | | | | | | | | | | | atm i've created this by just using position:absolute; and then a % width and % from left side. For example the 2nd column atm is width:20%; left:40%; (because 1st column is 40% width) I'm sure you can help, thx! (if I didn't explain too well, ask all questions ) I have a css site which is structured as following: <head> <body> <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="leftmenu"></div> <div id="rightmenu"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> #container{width:100%;height:100%;} #header{height:105px;width:100%;} #navigation {width:100%;} #LeftMenu { position: absolute; width: 150px; top: 145px; left: 2px; height: 553px;} #RightMenu{ position: absolute; width: 220px; top: 145px; right: 2px; height: 553px; } #content{ margin: 20px 225px 5px 155px; height: 550px; } My main problem is that when the left menu or right menu content increases it overflows the container and goes above footer. how can i make leftmenu, content and right menu when one is increasing all to increase together? Cheers [/CODE]I have a 2 column css layout. I am having a problem with getting the vertical line that separates the left and right column to go the length of the page. It grows with the content in the right column. Here is an example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>xyzTrader.com</title> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> </head> <body id="type-b"><!----> <div id="wrap"> <div id="header"> <div id="site-name">xyzTrader.com</div> <div id="search"> <form action=""> <label for="searchsite">Site Search:</label> <input id="searchsite" name="searchsite" type="text" /> <input type="submit" value="Go" class="f-submit" /> </form> </div> </div> <div id="content-wrap"> <div id="login"> <form method="post" action="/test/header.php"> Username <br /> <input name="uname" type="text" id="uname"> <br /> Password<br /> <input name="pword" type="password" id="pword"> <br /> <input name="Login" type="submit" id="Login" value="Login"> </form> </div> <div id="utility"> <ul id="nav-secondary"> <li class="first"><b>Catagories</b></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> <li><a href="#">Books</a></li> </div> <div id="content"> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> <p>hello<br>sfafssf</P> and here is the css file: Code:
/* THE BIG GUYS */
* {margin:0;padding:0}
html {min-height: 100%; min-width: 100%;}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}
/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer}
a:link {color:#c00}
a:visited {color:#999}
a:hover,a:active {color:#069}
/* FORMS */
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#666;color:#fff;font-weight:bold;font-size:96%}
/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em}
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em}
h1 {font-size: 196%;margin-top:.6em}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}
/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}
dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}
/* GENERAL */
img {border:none}
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}
/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}
#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:50px;left:auto;width:18em}
#search form {margin:0}
#search input {width:8em;margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}
/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:100%;margin:0 auto;position:relative; }
#content-wrap {position:relative;width:100%;}
#login {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#utility {position:absolute; top:125px;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px}
#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}
/* LAYOUT TYPE B */
#type-b #content-wrap {background: url("images/content_wrap_bg.gif") repeat-y 30px 0;min-height:98%;}
#type-b #content {margin: 0 23px 0 235px}
/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#fff}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #fff url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer}
#nav-secondary a:link {color:#000}
#nav-secondary a:visited {color:#000}
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px}
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00}
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}
/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}
#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {font-weight:bold}
/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}
/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
#footer a:link {color:#999}
Can anyone give me some advice or what to do to make this line go the length of the page?? Thanks in advance, Mike Hello I would be really grateful if anyone can help me - I'm struggling with a 3 column layout using css. It seems to work well in all except IE6 (I'm looking at it on a Mac using Safari and Firefox, I've got different browser screen shots from a website and all seem OK except IE6, which puts the center column under the other two, instead of at the same height. If anyone has any ideas, they'd be much appreciated - I don't really know what I'm doing with css, and I have tried several different 3 col layouts that I've found on the web: this is the only one that has worked in almost all browsers for me. This is the style sheet: body {background: #003366; } a { font-family: Verdana, Arial, sans-serif; text-decoration:none; font-size: medium; color: #de8600;} h1 { font-family: Verdana, Arial, sans-serif; font-size: x-large; font-weight: bold; background: #FFFFFF; color: #DE8600} h2 { font-family: Verdana, Arial, sans-serif; font-size: large; font-weight: bold; color: #003366} h3 { font-family: Verdana, Arial, sans-serif; font-size: medium; font-weight: bold; color: #003366} h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: bold; background: #003366; color: #DE8600} h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; background: #FFFFCC; color: #000033} p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #003366;} a:visited {font-family: Verdana, Arial, sans-serif; font-size: medium; color: #de8600;} a:hover { font-family: Verdana, Arial, sans-serif; text-decoration:underline; font-size: medium; color: #DE8600;} body { padding: 0px; border:0; background: #003366; } div#wrapper { width: 780px; margin: 0 auto; } div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px } #header .slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; padding-left: 20px; padding-right: 20px; color: #003366; } div#navcontainer { background: #003366; margin: 0px 0px 0px 0px; padding: 1em 0 0 0; font-size: 0.8em; text-align: center text-transform: lowercase; border-top: 2px solid #de8600; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; display: inline; width: 100%; font-size: 0.8em; } ul#navlist li { display: block; float: left; width: 20%; text-align: center margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #666666; text-decoration: none; background: #cccccc url(nav.gif); } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #cccccc url(nav.gif); color: #996600; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #996600; background: transparent; border-color: #aaab9c #fff #fff #ccc; } #container { position: relative; display:block; background:#0ac; border-left:200px solid #003366; border-right:200px solid #003366; } #inner { display:block; margin-left:-200px; margin-right:-200px; padding:5px; } #left { float:left; position: relative; width:200px; left:0px; } #right { float:right; position: relative; width:200px; right:0px; } #center { margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;} .clear {clear:both;} /* Just to extend each column */ #inner a:visited, a {text-decoration:none; cursor:default;} #inner a span {display:none;} #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;} #inner a:active span, #inner a:focus span {display:block;} .menu { width:150px; height:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; margin-right:1px; position:relative; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; } .menu ul li:hover ul li:hover a.hide { width:150px; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; } div#fla { position:relative; text-align: center; font-size: 10px; margin: 20px 0 20px 0; } p.fla { text-align: center; font-size: 10px; color: #ffffff; margin: 0; } p.date { text-align: right; font-size: 0.8em; color: #ffffff; margin: 0; } div#guardian { height:60px; margin: 10px 0 10px 0; align: right; } div#banner { width:200px; margin:20px 0 20px 0; background:#ffffff; padding:10; color:#003366; font-size:10px; text-align: center; border:1px solid #de8600; } #banner a:hover { color:#996600; font-size:10px; text-align: center; background:#cccccc; } p.banner { color:#003366; font-size:10px; text-align: center; } div#google { width:180px; height:120px; margin:10px 0 0 0; background:#003366; padding:5px; color:#ffffff; } div#search { width:180px; margin:20px 0 20px 0; background:#ffffff url("search.gif"); background-repeat: no-repeat; padding:10px; color:#003366; border:1px solid #de8600; } p.search { color:#003366; font-size:11px; text-align: center; } a.search { color:#003366; font-size:11px; text-align: center; } #search a:hover { color:#996600; font-size:11px; text-align: center; } div#edit { width:250px; margin:20px 0 0 0; background:#ffffff url("edit-box.jpg"); background-repeat: no-repeat; padding:20px; color:#003366; border:1px solid #de8600; } p.edit { color:#003366; font-size:11px; text-align: center; } a.edit { color:#003366; font-size:11px; text-align: left; } #edit a:hover { color:#996600; font-size:11px; text-align: left; } .gallerycontent{ width: 250px; border: 1px solid #de8600 background-color: #fffFFF; text-align: center; display: block; } div#footer { clear:both; position:relative; align:center; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 20px; width:780px; height: 160px } p.footer { color:#ffffff; font-size:10px; text-align: left; } I am apparently not allowed to post the URL of the page, but I hope that someone may be able to make some suggestions anyway. Thanks for your time! Frances I have an issue with a 2 column CSS layout. Here is my code: Code:
<style>
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:70%;
background:yellow;
}
</style>
<div id="container1">
<div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
<div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem. </p>
<p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
</div>
Which produces this: Basically, I need a set up on the columns so that if there is no content in the left column (col1) col 2 will fill up the missing area. It doesn't work with the above code, specifically because of this part of the CSS Code: #col2 {
float:left;
width:70%;
background:yellow;
}
Which makes col2 move to the left, but retains the 70% width If i change the width to 100% or auto, then the col2 appears below col1 if I have content in col1. If I put no width or float in col2, the content in col2 wraps around col1: Help greatly appreciated I'm working on a new design for my blog and having a problem with a border. I have a three column layout and want to have a border on the left, right, and bottom the container div, but instead of surrounding it it just sticks it at the top by itself. Heres the page and css Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,bold' rel='stylesheet' type='text/css' />
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>3 Column Liquid Fixed Fixed CSS Layout</title>
</head>
<body>
<div class="wrapper3">
<div class="header3">
<img src="logo.png" alt="SuperSonicMoose" />
<div id="line1"></div><div id="line2"></div>
</div>
<div class="wrapleft3">
<div class="left3">
<div class="article">
<h1>Article Title</h1><h2>Posted on Friday, March 11th, 2011</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Read More >></a></p>
</div></div>
</div>
<div class="middle3"><div class="article">
middle fixed
</div> </div>
<div class="right3"><div class="article">
right fixed
</div> </div>
<div class="footer3">
footer
</div>
</div>
</body>
</html>
Code:
.wrapper3{
width: 93%;
min-height: 100%;
margin: 0 auto;
border:4px solid #333333;
}
.header3{
background-image: url(headbg.png);
float: left;
width: 100%;
background-color: white;
}
.wrapleft3{
float: left;
width: 100%;
background-color: #ffffff;
}
.left3{
margin-right:410px;
background-color: #ffffff;
min-height: 200px;
border-right:#E9F6FC solid 2px;
}
.middle3{
float: left;
width: 265px;
margin-left: -406px;
background-color: #ffffff;
min-height: 200px;
}
.right3{
float: right;
width: 135px;
margin-left: -137px;
background-color: #ffffff;
min-height: 200px;
border-left:#E9F6FC solid 2px;
}
.footer3{
float: left;
width: 100%;
background-color: #ffffff;
}
body {
background-image: url(pgbg.png);
padding: 0px;
margin: 0px;
background-color: #8CD4F1;
font-family: 'PT Serif', arial, serif;
}
#line1 {border-bottom-style: solid; border-bottom-color: #8CD4F1; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:99%; margin: auto;}
#line2 {border-bottom-style: solid; border-bottom-color: #E9F6FC; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:98%; margin: auto;}
.left3 h1 {
margin: 0;padding: 0;
color: #4A7280;
font-size: 20px;
border: 0px;
border-bottom: 1px solid #E9F6FC;
width:70%;
}
.left3 h2 {font-size: 11px; color: #666666;margin: 0;padding: 0;
}
.left3 p {font-size: 12px; color: #5F5F5F;}
.article {padding:10px;}
a { text-decoration: none; color: #B83352; }
I'm sure its something stupid but I haven't been able to figure it out all day. At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. My site has three columns. left-middle-right The middle column in IE is right underneath the header as it should be. On firefox the middle coumn is as far below the header as the height of the right column. I have tried everything but i cant get it to look right in both browsers. It is all done with floated divs and doesn't use any tables at all. Please can someone help me! www.datahq-online.co.uk Thank you! Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. I seem to be having a bit of a problem with a layout I am attempting...here is the problem... First of all, this is a 4 column layout with an absolutely positioned header. The 4 columns use floats for positioning as I am trying to keep a natural code flow. The 4 columns are intended to expand and contract with the page's width, and the heights should be 100%. The content of the page flows below the fold of the page on nearly every page. My problem is with the 100% height. In Firefox the footer that I am using to clear the floats is not clearing them, but rather resting below the floats. Does anyone have a good reference for using floats with 100% height that flow below the fold of the page? If someone wants to take a look at an example, you should message me as I can't post the development site publicly. Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Hey, So I have a three column layout being implemented as such: html: Code:
<div class="content">
<div class="col1 column"></div>
<div class="col3 column"></div>
<div class="col2 column">
<div class="header">Header</div>
</div>
</div>
CSS: Code:
.column {
padding: 10px;
position:relative;
}
.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}
.col1 {
float: left;
width:250px;
}
.col2 {
margin-left: auto;
margin-right: auto;
}
.col3 {
float:right;
width:250px;
}
The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks. --Surgery Hello, I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! |
|||||||