Search code examples
cssfixedalignment

CSS | Stretching out wrappers horizontally fixed to browser resolution

http://jsfiddle.net/aLmUy/1/

^^^^ Look here to see what I mean ^^^

Ok this is a little hard to explain...

Basically what I want is to have a fixed layout horizontally (not vertically) so the page is stretched out and expands the wrappers to fill and re-size to a persons browser. The only sizes I want to set are the separations of which the wrappers are far apart by. I want the page to re-size with the browser if you were to click on the edge of the browser and change the size.

I would think the way of doing this is to for example lets say my layout consists of my content on the left, and navigation menu on the right....

I'd just make my content to 70% width and my menu 30% right? But that doesn't work because my margins are there taking up space for the separations. So how do I go about making this layout structure? It's pretty much what every site uses I just can't get the grasp of how it's done.

CSS:

#wrapper {
position: relative;
float: left;
/* width: 70%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 0 30px 20px;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

#wrapper_right {
position: relative;
float: right;
/* width: 30%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 20px 30px 0;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

.fade {
opacity: 0.7;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 1;
}




HTML:

    <!-- #mainwrap -->
    <div id="wrapper" class="fade">

        BLAH BLAH BLAH BLAH BLAH BLAH <br />
        BLAH BLAH BLAH BLAH BLAH BLAH <br />

    </div>
    <!-- /#mainpagewrap -->


    <!-- #wrapper_right -->
    <div id="wrapper_right" class="fade">
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    </div>
    <!-- /#wrapper_right -->

Can someone make a simple layout with a wrapper on the left, content in the middle, and another on the right with dimensions of 25%, 50%, 25% vertically with margins and that also re-sizes according to browser resolution?

So I could see how it's done. Also thanks in advance for anyone that helps (:

Solution

  • I achieved what you wanted to do, but I had to change a few things:

    1. Added a parent div to wrap the 2 divs.
    2. Removed the margins and added padding to the parent.
    3. inline-blocked divs and moved the right div away from the left

    http://jsfiddle.net/aLmUy/2/