Another issue with CSS

monkeytooth · May 31, 2009

Ok I am working on a centered layout, got it centered, can make it do for the most part what I want it to do, however I am having issues keeping 2 divs contained within the centered container.

html, body {
background-color:#3F3965;
height: 100%;
min-height: 100%;
max-height: 100%;
margin:0; 
padding:0;
font-family:Verdana;
font-size:12pt;
color:#000000;
}
#main_C {
width:100%;
height:100%;
background-color:#009999;
margin: 0;
text-align: center;
}
#main_D {
width: 800px;
height: 100%;
margin: 0 auto;
background:#336666 url(../imgs/site/body_mb_02.jpg) repeat-y;
padding:0;
text-align: center;
}
#main_hd1{
height:18px;
margin:0;
padding:0;
background:#336666 url(../imgs/site/body_mb_01.jpg) no-repeat;
}
#sub_l{
width:190px;
margin:0;
padding:0;
background:#990000;
float:left;
}
#sub_r{
width:610px;
margin:0;
padding:0;
background:#CCCC99;
float:left;
}

I want sub_l and sub_r to push the main container (main_D) down if they exceed the window size. However I seem to be having an issue with that. I also need them to line up with the mini header part (main_hd1), which that part they do.

So far it seems I can get them to line up directly under the main_hd1, but if i strectch them 100% in hieght main_hd1 seems to force them to push down just that little bit past the contanier, and if I just fill either sub_l or sub_r with content to span further they just push down past the container..

http://newyorkbarshow.com/build2/ for an example of what I mean..

SuperBlue · June 3, 2009

The equal-height column Layouts can be quite difficult to make using CSS. You need to either apply the background to additional wrappers, using relative positioning and floats. Or to use absolute positioning combined with z-index, to place a wrapper around the content in each column, with the same background as the other columns, and then move the content back in place.

As of today, the simplest way is still to use tables. But i suggest you check out the Example below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Equal Height Columns Using Floats</title>
    <style type="text/css">
* { margin: 0; padding: 0; }
body {
background: #72c1ca;
text-align: center;
}
.S1 { /* Shared Styles */
position: relative;
float: left;
}
.S2 { /* Shared Styles */
width: 100%; /* needed for positioning */
}
#Basement {
position: relative; /* fixes overflow bug in IE */
min-width: 550px;
max-width: 1024px;
width: 75%;
background: #4f75ff;
margin: 1em auto; /* Centers the page and applies a 1em top margin */
overflow: hidden; /* hides the overflowing floor divisions */
text-align: left;
}
#FirstFloor {
background: silver;
}
#SecondFloor {
background: #ffffff;
right: 60%;
}
#Content1 {
left: 100%;
width: 60%;
}
#Content2 {
left: 0%;
width: 38%;
}

/* Optional */
#Content1 p {
  padding: 0 1em 1em 1em;
}
#Content1 h1 {
  padding: 0 0.5em 0.5em 0.5em;
}
    </style>
  </head>

  <body>

    <div id="Basement">
     <div id="TopContent">TopContent</div>
     <div id="FirstFloor" class="S1 S2">
      <div id="SecondFloor" class="S1 S2">

        <div id="Content1" class="S1">
	  <h1>2 Column Equal-Height Layout</h1>
	  <p>This layout has Two Columns of Equal height, no matter which column is the highest.</p>
	  <p>The way this was achieved, was by applying an additional Division for each Column. These was then used when applying the Background.</p>
        </div>
        <div id="Content2" class="S1">
        </div>
     </div>
     <div id="BottomContent">BottomContent</div>
    </div>

  </body>

</html>

Sign In

Another issue with CSS

Recommended Posts

monkeytooth

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information