Css floating problem (width:100%)

Question

HTML

Sorted it for seo

<div class="content">Content</div>
<div class="nav1">
  <ul>
  <li>nav 1</li>
  <li>nav 2</li>
  <li>nav 3</li>
  </ul>
</div>    
<div class="nav2">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

CSS

.nav1 {
    width:100px;
    float:left;
}
.nav2 {
    width:100px;
    float:right;
}
.content {
    width:100%;
    float:right;
    background:#09F;
}

the numbering:

1: content

2: nav1

3: nav2

4: container

I want something like that;

https://i.sstatic.net/AH5OR.jpg

But the result is bad.

https://i.sstatic.net/ypCft.jpg

Are you sure your images are the right way around there? Which is your desired result? — thirtydot
– thirtydot, Commented Feb 26, 2011 at 16:18
@n0rd to be working BUT, looks different in the browser link — Ali Han
– Ali Han, Commented Feb 26, 2011 at 17:31

thirtydot · Accepted Answer · 2011-02-26 16:31:06Z

4

Live Demo

This will work as it is, providing the content will be higher than the menus. If that's not the case, then you can adjust the min-height value on .content. You should set it to the height of your highest menu.

HTML:

<div id="container">
    <div class="content">Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /></div>

    <div class="nav1">
        <ul>
            <li>nav 1</li>
            <li>nav 2</li>
            <li>nav 3</li>
        </ul>
    </div>

    <div class="nav2">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
        </ul>
    </div>

    <div id="footer">footer</div>
</div>

CSS:

#container {
    width: 80%;
    margin: 0 auto;
    position: relative
}
.nav1 {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ccc
}
.nav2 {
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    background: #ccc
}
.content {
    margin-left: 100px;
    margin-right: 100px;
    background: #09f;
    min-height: 200px
}
#footer {
    background: #999
}

answered Feb 26, 2011 at 16:31

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

5 Comments

thirtydot Over a year ago

I already addressed that. You should add a min-height to .content. Like this: jsfiddle.net/Mnbz2/2 - I changed the min-height to 340px. I know this isn't perfect, but it should be viable. Do you really have such a dynamic, changing menu that you can't just stick min-height: 400px or something? Also, how many pages will your highly SEO optimized site have with that little content? Content is the most important thing for SEO :)

Ali Han Over a year ago

This menu(nav1) is dynamic. There are sometimes 10, sometimes 30 items these areas is variable: nav's, content, footer

thirtydot Over a year ago

You could fix it easily with a little jQuery, would that be acceptable?

thirtydot Over a year ago

I have no idea what you meant in that last comment.

Ali Han Over a year ago

@thirtydot Thank you. I did with jQuery

Fabiano Shark · Accepted Answer · 2011-02-26 16:26:22Z

html: <div class="container">container</div>

css: .container { width:100%; float:right; border:1px solid; clear:both; }

example:

<html>
<head>
<style>
.nav1 {
    width:100px;
    float:left;
    border:1px solid;
}
.nav2 {
    width:100px;
    float:right;
    border:1px solid;
}
.content {
    width:100%;
    float:right;
    background:#09F;
}
.container {
    width:100%;
    float:right;
    border:1px solid;
    clear:both;
}
</style>
</head>
<body>
<div class="content">Content</div>

<div class="nav1">
<ul>
<li>nav 1</li>
<li>nav 2</li>
<li>nav 3</li>
</ul>
</div>

<div class="nav2">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>

<div class="container">container</div>

</body>

Elwhis · Accepted Answer · 2011-02-26 16:34:50Z

0

The easiest way to achieve your desired layout may be to wrap your nav divs into your content div. You're not getting the exact layout (the content div is not just in teh center but is spread to the whole width), but its a sollution as flexible as possible

  <div class="content">Content
    <div class="nav1">
      <ul>
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
      </ul>
    </div>    
    <div class="nav2">
      <ul>
        <li>item 1</li>
        <li>item 2</li>
      </ul>
    </div>
  </div>

answered Feb 26, 2011 at 16:34

Elwhis

1,2512 gold badges25 silver badges45 bronze badges

Collectives™ on Stack Overflow

Css floating problem (width:100%)

Sorted it for seo

the numbering:

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Sorted it for seo

the numbering:

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related