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
– chility, Commented Jun 30, 2013 at 9:41
There is a problem with width:auto. It works with an hardcoded number. See this jsfiddle. — Petr R.
– Petr R., Commented Jun 30, 2013 at 9:43

Community · Accepted Answer · 2017-05-23 10:25:32Z

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, 2017 at 10:25

CommunityBot

11 silver badge

answered Jun 30, 2013 at 9:41

Danield

127k37 gold badges235 silver badges268 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chility Over a year ago

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

Ichigo Kurosaki · Accepted Answer · 2013-06-30 09:45:14Z

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, 2013 at 9:45

Ichigo Kurosaki

3,8539 gold badges43 silver badges57 bronze badges

Comments

Pumpkinpro · Accepted Answer · 2013-06-30 09:48:15Z

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, 2013 at 9:48

answered Jun 30, 2013 at 9:41

Pumpkinpro

8474 silver badges5 bronze badges

Collectives™ on Stack Overflow

Strange HTML/CSS Issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related