CSS two column full width

Question

So I have a website which has a header, a footer and two main content columns inbetween.

The left column is for navigation. The right one is a map. I want both to fill the width of the browser. I seem to be facing problems with different resolutions and different browsers. The map always displaces to below the footer or it leaves a white space on the right.

My link: http://www.trashvigil.com/nsdf/www/index1.php

This is my code:

    #map{
    float:left;
    height:572px;
    width:79.88%;
            border-right: 2px solid #000;
            border-bottom: 3px solid #000;
    }

            #leftnav
    {
    float:left;
    width:250px;
    height: 572px;  
            border-right: 3px solid #000;
            border-bottom: 3px solid #000;
             }

#map is the map container. #Leftnav is navigation.

Thank you,

Kaushik

Please provide code. Don't expect people to bother poking around in your source. — Jørgen R, May 22 '12 at 09:06
You are probably using percentages, just clear the float on the right column and place it on the left on the HTML code, check this question: http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid/5195902#5195902 — jackJoe, May 22 '12 at 09:08

score 3 · Answer 1 · answered May 22 '12 at 09:23

3

You need something like this:

#map {
    margin-left:250px;    
    height:572px;
}
#leftnav {
    float:left;
    width:250px;
    height: 572px;  
}

The idea is to float the leftnav and then set a left margin for the map that is equal to the width of the leftnav.

You can see it live here: http://dabblet.com/gist/2767788

answered May 22 '12 at 09:23

Ana

35,599
6
80
131

Hey, so this worked.But the width of the right column should be specified right?? On Safari, the width is cut to half! I haven't given it any width now. – KaushikTD May 22 '12 at 09:58
No, you shouldn't specify the width of the map. It should extend all the way to the right. – Ana May 22 '12 at 10:01
I just checked my example in Safari and it looks fine to me. – Ana May 22 '12 at 10:07
I followed the same formatting you've mentioned. It's fixed the problem on Chrome, Firefox and IE. Safari is screwing it up. – KaushikTD May 22 '12 at 13:24

score 1 · Answer 2 · answered Mar 21 '14 at 15:25

1

#nav {
position:absolute; 
left:0px; width:250px;
height:375px; top:50px; /* height of your top bar*/
}

#map{
margin-left:250px;
height:572px;
}

answered Mar 21 '14 at 15:25

Nitin Anand

795
6
9

score 0 · Answer 3 · answered May 22 '12 at 09:15

Something like this should be what you need.

<style>
#main
{
    width: 900px;
    overflow: hidden;
}

#leftnav
{
    float: left;
}

#map
{
    float: right;
}
</style>

<div id="header">
</div>

<div id="main">
    <div id="leftnav">
    </div>

    <div id="map">
    </div>
</div>

<div id="footer">
</div>

score 0 · Answer 4 · answered May 22 '12 at 09:21

Write like this:

#map{
    overflow:hidden;
    height:572px;
    border-right: 2px solid #000;
    border-bottom: 3px solid #000;
    }

#leftnav{
    float:left;
    width:250px;
    height: 572px;  
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    }

CSS two column full width

4 Answers4

Linked