make div lay on top of wrapping divs padding

surreal5335 · 01-28-2013, 09:50 PM

I have a 2 column layout where my left column is fixed and right column will adjust as the screen size increases. So far I have right column behaving perfectly by adding left padding to my wrapping div making enough room for the left div to fit in place. my problem is my left div is going below where the padding is.

so basic setup:

Code:

<div class="wrapper">

<div class="right_col">
</div>

<div class="left_col">
</div>

</div>

my css:

Code:

.wrapper
{
 padding-left: 250px;
}

.left_col
{
width: 100%;
}

.right_col
{
width: 240px;
position: relative;
right: 250px;
}

horizontally, they are all where they need to be, but vertically my left_col is sitting below where my padding is created by the wrapper.

The only way to fix this and make it ignore the padding is by setting position absolute. But this will then break it out of all divs. so it will float freely on the page which will screw up how to place it as the screen size changes.

Any suggestions on how to fix this?

Excavator · 01-29-2013, 03:46 AM

Hello surreal5335,
Look at it this way and see if it works for you -

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {margin: 0;}
#left {
	height: 600px; /*demo only*/
	width: 400px;
	float: left; 
	background: #3ff;
}
#right {
	height: 600px; /*demo only*/
	margin: 0 0 0 400px;
	background: #f00;
}
</style>
</head>
<body>
        <div id="left">
        <!--end left--></div>
    <div id="right">
    <!--end right--></div>
</body>
</html>

Based on this simple 2 column demo.