homepage Welcome to WebmasterWorld Guest from 54.211.235.255
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Need Help With "Simple" 2 Column Fixed-Liquid Layout
Simple 2 column layout in CSS
NightOwl888




msg:4412222
 4:27 am on Jan 30, 2012 (gmt 0)

I am modifying my site to go from a 2-1 column order to a 1-2 column order because changing it had a negative impact on SEO purposes. However, my oringinal layout was based on tables and I want to move on to CSS. The layout must have a fixed menu on the left with a liquid content section. The catch is that the liquid content section must contain a centered 600px wide content floater. Also, the menu should have a background color that is #dcdcdc and the liquid section should have a white background. Both background colors should extend to the bottom of the viewport regardless of the size of the content.

I found an online example similar to what I was looking for and adapted it, however, I can't seem to get it working right in FireFox. Basically, my menu is along the left edge of the viewport, but when using the layout as is, the links do not work in Firefox 7 (although everything is fine in IE9).

I managed to "fix" this problem by moving my left margin from the #contentsection selector to the #contentwrapper selector, but doing this caused a.) a horizontal scroll bar and b.) made my floating content section move 151px to the right of center. I wasn't sure if I was on the right track with this fix, so I am posting the original code here that lays out fine (including the background colors) with the links not working.

I am willing to consider fixes that require more or less markup than what I have posted if that is what fixing this issue entails. Basically, I want the exact same layout I am posting with clickable links in the menu on the left (and of course, the main content should be clickable).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

<html>
<head>
<style type="text/css">
html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }

#topsection { background-color:#000; color:#fff; }


#widthwrapper { width:100%; background-color:#dcdcdc; }
#leftsection { width:151px; float:left; margin-right:-100%; }
#contentwrapper { float:left; width:100%; }
#contentsection { padding:0; margin:0 0 0 151px; overflow:hidden; height:100%; min-height:100%; background-color:#fff; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px;background-color:#999; }

</style>
</head>
<body>
<form>

<div id="topsection">
Top Navigation
</div>

<div id="widthwrapper">

<div id="leftsection">
Left Menu<br/>
<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
<a href="#">This link doesn't work in Firefox</a>
</div>


<div id="contentwrapper">
<div id="contentsection">
<div id="contentfloater">
<div id="contentcontainer">
This is the main content of the page...
</div>
<div id="historycontainer">
More page content...
</div>
<div id="bottomsection">
Bottom Navigation
</div>
</div>
</div>

</div>

</div>


</form>
</body>
</html>

 

Marshall




msg:4412228
 5:25 am on Jan 30, 2012 (gmt 0)

I took a look at this and there are several things I may be over looking and/or do not understand.

a) Do you want your top navigation to span 100% of the screen though the section below only covers about 751px?
b) why does the left section have a negative left margin?
c) Why does the contentsection have a left margin of 151px?

I made some changes (below) which made the layout (possibly) appear like I think you want.

html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }
#topsection { background-color:#000; color:#fff; }
#widthwrapper { width:100%; background-color:#dcdcdc; }
#leftsection { width:151px; float:left; /*margin-right:-100%;*/ }
#contentwrapper { float:left; /*width:100%;*/ }
#contentsection { padding:0; margin:0 0 0 0/*151px*/; overflow:hidden; height:100%; min-height:100%; background-color:#fff; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px;background-color:#999; }

And if I may make a suggestion, use a <ul> for your navigation rather than lines and <br>'s.

Marshall

NightOwl888




msg:4412232
 5:55 am on Jan 30, 2012 (gmt 0)

a) Yes, the top navigation should be liquid and expand to 100% of the screen.
b) This is from the example I found. It apparently is used to prevent the content column from appearing below the left column. Can't link in this forum, but the page can be found in Google search titled "Css Box-model: 2 colonne - 1 col fissa / 1 col fluida - float:left;".
c) This is also from the example I found. Without this, the menu would be completely covered by the content column.

The right column should extend from 151px to the right edge of the screen regardless of the size of the viewport. This is not what happens in your example. Also, in your example if the viewport is smaller than the width of the content, the content will appear below the menu instead of producing a horizontal scrollbar.

Also, I want the right column to contain a centered floating section (centered between the left column and the right side of the viewport). The background of the right content section should be entirely white, the menu section on the left should be entirely #dcdcdc; (gray), all the way to the bottom of the viewport, regardless how much or little content is in the content section. In my final example, the centered 600px will have a white background. I made it #999 here for demonstration purposes only.

The best way to test this out is to resize the browser with your mouse to see the content center itself between the menu and the right side of the screen. Check the sample I provided - this is exactly what I want except for the fact the link is not clickable.

If you know of another 2-column layout that is 1-2 column order, please let me know what to search for - the ones at Dynamic Drive were all in 2-1 column order.

NightOwl888




msg:4412286
 12:30 pm on Jan 30, 2012 (gmt 0)

I discovered a different way to accomplish this on another web site. It isn't perfect - I had to hard-code the min-height in order to make it reach the bottom. This causes there to be a vertical scrollbar in cases where the content is too short. However, it is acceptable for my purposes because this layout will be redesigned soon anyway - I will probably go with a centered fixed width layout (including menu) to simplify things.

I tested this layout in IE7, IE8, IE9, FireFox 7, Safari, and Chrome and it looks like it works in every case. Here is the CSS.


html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }

#topsection { background-color:#000; color:#fff; }

#widthwrapper { clear:both; position:relative; }
#leftsection { position:absolute; width:151px; left:0; background-color:#dcdcdc; }
#contentwrapper { margin:0 0 0 151px; }
#contentsection { padding:0; margin:0; background-color:#fff; min-height:1200px; /* slightly larger than main menu */ overflow:visible; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px; background-color:#fff; }

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved