Strange HTML/CSS Issue

Question

I know that it has been asked tons of times, but I'm still not able to find a fix for this issue. Here is what I have this: JsFiddle

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:auto">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:100%;width:auto;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:100%;width:auto;float:left;">
test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content </div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>

</div>

</body>
</html>

The problem us that the content is going under the menu. I tried everything in order to fix it, but it seems imposible. I'm pretty sure that I'm missing something small.

EDIT: The content should be next to the menu and the menu shuld have 100% height

The content should be next to the menu and the menu shuld have 100% height I have edited the question. :) — chility, Jun 30 '13 at 09:41
There is a problem with `width:auto`. It works with an hardcoded number. [See this jsfiddle.](http://jsfiddle.net/kmWHF) — Petr R., Jun 30 '13 at 09:43

score 4 · Accepted Answer · edited May 23 '17 at 10:25

4

Instead of float:left on the content , replace it with overflow:auto

This triggers a block formatting context and causes the content to fill the remaining horizontal place. See this post.

Updated FIDDLE

edited May 23 '17 at 10:25

Community

1
1

answered Jun 30 '13 at 09:41

Danield

121,619
37
226
255

Ok, but I need the footer of the bottom of the page. I mean that if the content is empty the page should not be changing. Now the footer is going up and everything seems to be messy. :( I also tried `bottom:0;` without success – chility Jun 30 '13 at 09:59

Pumpkinpro · Answer 2 · 2013-06-30T09:48:15.477

0

add position:absolute; to id="menu" and height:auto

#menu{
background-color: #FFD700;
height: auto;
width: auto;
float: left;
position: absolute;
}

LINK

or if you want it next to menu than this LINK

where you remove float to id="content"

edited Jun 30 '13 at 09:48

answered Jun 30 '13 at 09:41

Pumpkinpro

837
4
5

score 0 · Answer 3 · answered Jun 30 '13 at 09:45

0

use a parent div to menu and content, give it style overflow:hidden

Then give some width to the menu say 20% and float:left And to content give float:right and width 80%

I have updated your jsfiddle link.. It showing proper result

answered Jun 30 '13 at 09:45

Ichigo Kurosaki

3,765
8
41
56

Strange HTML/CSS Issue

3 Answers3