0

I have a simple problem, but seemingly I'm not that smart :/ And I'm in a bit of a rush also! I went thru other answers and tried several options, I cannot find solution thou. I do apologize if this is trivial, I am a noob...

Description: This is a left-align website. Link here: http://goo.gl/LrzYy7

I have one DIV (id="leftwrap") that is on left and one DIV (id="content") that floats to the right of it. In "Leftwrap" I have two DIV on top of each other. The bottom one (id="header_bottom") has "height:100vm" so that it extends according to content in "Content" DIV. At least that's the idea.

But...for some reason it just...extends to whatever height it feels it's good. Or something like that :/

This is HTML:

<body>
<div id="mainwrap">
<div id="leftwrap">
<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div>
<div id="header_bottom"></div>
</div>

<div id="content"><img src="img/rightcontent.jpg" width="675" height="770" alt="Right Content" /></div>
</div>
</body>

and this is CSS

body, div, img {margin:0; padding:0; }
body { 
    position: absolute;
    top: 0;
    left: 0;
    background: #f0f0f0;
}  

/*MAIN DIVS AND CONTENT*/  
#mainwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 945px;  
}
#leftwrap { 
    width: 270px;  
    float: left;
}  
#header {    
    width: 270px;  
    height: 929px; 
}  
#header_bottom {  
    width: 270px;  
    height:100vh; 
    background: #d8991c;
} 

#content
{
    position: absolute;
    top: 0;
    left: 270px;
    float: right; 
}

I know it's kinda messy (I bet it can be coded simpler but I had hard time to make it float correctly).

Is there a problem due to not specifying height or something?

Thanks

Grinder
  • 1
  • 1

3 Answers3

0

in your HTML, do this:

<div id="mainwrap">
<div id="leftwrap">
<div id="header"><img src="img/leftbar.jpg" alt="Left Column" /></div>
<div id="header_bottom"></div>
</div>

<div id="content"><img src="img/rightcontent.jpg" alt="Right Content" /></div>
</div>

Basically, remove the inline styles. And never use them again unless you're forced to. And even then, resist the urge as much as possible.

Now, in your CSS:

body, div, img {
    margin:0;
    padding:0;
}
body {
    top: 0;
    left: 0;
    background: #f0f0f0;
}
/*MAIN DIVS AND CONTENT*/
#mainwrap {
    top: 0;
    left: 0;
    width: 945px;
}
#leftwrap {
    width: 270px;
    float: left;
}
#header {
    width: 270px;
    height: 929px;
}
#header_bottom {
    width: 270px;
    background: #d8991c;
}
#content {
    top: 0;
    left: 270px;
    float: right;
}

Basically, remove your position:absolute declarations. And never use them again unless you're forced to. And even then, resist the urge as much as possible (OK, this time it's an exaggeration, but really, 99 out of 100 times people uses absolute positioning, it's wrong and causes layout issues)

Either way, in your particular case, your problem was the randomly added 100vh. I think you don't know what it means, but just in case, it's wrongly used, and it was doing exactly what you told it to do: to have 100% height of the viewport, thus causing the layout to have double the height

Devin
  • 7,690
  • 6
  • 39
  • 54
0

CSS also has an function called z-index which enables layers on webpages. for example a z-index of 0 would be at the very bottom of the page in a layer stack and a z-index of 5 would be the 5th layer and would be the top. z-index can enable as many layers as you want. Heres a little example without the HTML though.

Div.Class1 {z-index: 0;}
Div.Class2 {z-index: 1;}
Div.Class3 {z-index: 2;}

So in that small example a div with a ID of Class1 will be at the bottom and the div with the ID of Class2 will be in front of the Class1 div and finally the Class3 Div would be on top of all of the others.

Brennan
  • 17
  • 9
0

Addition to above: I've simplified html and css:

<body>
<div id="mainwrap">

<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div>
<div id="content">
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column" /><br />
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column Copy" />
</div>

</div>
</body>

And css:

/*GENERAL STUFF*/

html, body {height: 100%;}
body, div, img {margin:0; padding:0; background: #f0f0f0;}

/*MAIN DIVS AND CONTENT*/ 

#mainwrap {
    width: 945px; 
}

#header {    
    width: 270px;  
    height: 100%; 
    float:left;
    background: #d8991c; /*bg-color that will create seamless extention the left DIV one height:100% will work*/
}  

#content
{
    width: 675px;
    float: right; 
}

Here is the website: I've updated the site http://goo.gl/LrzYy7

So how, in the name of all that is sacred, I make left DIV be always 100% height, no matter how much content there is?? I've tried about 10 options I found on web and none is working ://

Please...helppp. Thanks!!

Grinder
  • 1
  • 1