kurt.santo Posted September 26, 2007 Share Posted September 26, 2007 Working on my first ever table-free website (yeah...) and wondered if there is an alternative to faux columns?I placed a container around the the relevant two divs, which references a bg image with the right bg colour for the left nav (and rest to left just being white). Looks cool in all browsers apart from Safari...Any ideas? Also, I wondered how I would have cornered edges around my main container? Would I need to create the relevant image files and use them as bg images in old fashion? And last but not least, to to clear a float: does it only goes inside <div> or <br>? There is a <div> after I cleared a float inside a <br>. The space is much too big...Kurt Link to comment Share on other sites More sharing options...
real_illusions Posted September 26, 2007 Share Posted September 26, 2007 eh?Can you post a link to the site or some code so we can see this in action? Link to comment Share on other sites More sharing options...
kurt.santo Posted September 26, 2007 Author Share Posted September 26, 2007 eh?Can you post a link to the site or some code so we can see this in action?Here is comes...This is my CSS:/* - - GENERAL ELEMENTS - -*/body { font: 12px Verdana, Arial, Helvetica, sans-serif; line-height:150%; background: #FFF; margin: 0; padding: 0; text-align: center; color: #7E8082; }h1 { font-size:16px; margin:0px; } img { margin:0px; padding:0px; border:none; }ul { list-style-type:none; border:none; width:150px; margin:0px; padding:0px; font:bold 12px; } li { background-color:#484FBD; border-bottom-style:solid; border-width:thin; border-color:#7e8082; margin:0px 0px 5px 0px; padding:2px 10px; } a:link, a:visited, a:hover, a:active { color:#FFF; line-height:150%; font-size:12px; font-weight:bold; text-decoration:none; } /* - - SPECIFIC SELECTORS - -*/#container { width:70%; min-width:780px; background: #FFF; margin: 15px auto; text-align: left; } #border { border-style:solid; border-width:thin; border-color:#7E8082; }#logo { background: #FFF; padding: 5px 0px 5px 10px; } #blueRow { background-color:#484fbd; height:108px; } #blueRowPic { float:left; padding:4px; margin:0px; }#blueRowPic img { padding-right:4px; } #blueRowText { margin:0px; padding:25px 0px 25px 496px; font-size:14px; line-height:150%; color:#FFF; font-weight:bold; } #main { background-color:#FFF; } #mainNav { float:left; width:150px; margin:0px; padding:30px 0px 0px 4px; }#mainContent { float:right; margin: 0px 0px 0px 150px; padding: 30px; } #footer { background:#484FBD; font-size:9px; color:#FFF; margin: 0px auto; text-align: center; padding: 0px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } And this my HTML: <body><div id="container"><div id="logo"><img src="logo.gif" width="200" height="52" /></div><div id="border"><div id="blueRow"><div id="blueRowPic"><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/></div> <div id="blueRowText">headline</div><br class="clearfloat" /></div> <div id="main"> <div id="mainNav"><ul><li><a href="#" target="_self">Home</a></li><li><a href="#" target="_self">About us</a></li><li><a href="#" target="_self">Products</a></li><li><a href="#" target="_self">Services</a></li><li><a href="#" target="_self">Our partners</a></li><li><a href="#" target="_self">Contact us</a></li></ul></div> <div id="mainContent"> <h1> Heading</h1> <p>Text<p> </div></div><br class="clearfloat" /> <div id="footer">copyrigh information etc</div></div></div></body> Currently I took the faux column bg out (will put back in when I resolve some other issues). mainNav and mainContent have a much too big of a gap in between now... (From one problem to the next;-)). I really do not understand why it does that. When I take the div for mainNav out mainContent goes to the place where it should be, but when I put it back it moves too far to right. Why is that? I could tear my hair...Kurt Link to comment Share on other sites More sharing options...
justsomeguy Posted September 26, 2007 Share Posted September 26, 2007 and wondered if there is an alternative to faux columns?How about real columns? I guess if you're going for table-free though, real columns would be out of the question. Link to comment Share on other sites More sharing options...
aspnetguy Posted September 26, 2007 Share Posted September 26, 2007 The only other option besides faux-columns is display: table-cell but this is still not supported in IE6 or IE7 Link to comment Share on other sites More sharing options...
kurt.santo Posted September 27, 2007 Author Share Posted September 27, 2007 The only other option besides faux-columns is display: table-cell but this is still not supported in IE6 or IE7Cheers, will have a think. But do you know why the mainContent sets itself so far apart from mainNav (in FF it actually shows up underneath, so sth with the clearing seems not to work)? I specified a margin of 150px from left and a left padding of 30px, which should make the text appear at 180px, which it does not...Kurt Link to comment Share on other sites More sharing options...
kurt.santo Posted September 27, 2007 Author Share Posted September 27, 2007 Cheers, will have a think. But do you know why the mainContent sets itself so far apart from mainNav (in FF it actually shows up underneath, so sth with the clearing seems not to work)? I specified a margin of 150px from left and a left padding of 30px, which should make the text appear at 180px, which it does not...KurtFound a solution: Took "float: right" out for #mainContent and it does what I want, yeah...Kurt Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.