CSS float not working properly

Question

I'm trying to get a really basic layout using only CSS and divs. What I would like to do is have 3 big divs on the same row and a small div below the first div of the first div in the row. Since I'm trying to set for all of them an height of 400px except for the first one and the small one - which have an heigh of 300px and 100px - I would expect them to show all on the same "line", making a big block. What I get instead is the following: problem in my layout

This is my CSS:

body    {
    background-color:white;
    }
header    { 
        background-color:black;
        color:red;
        height:10%;
        width:100%;
        padding:1px;
        font-family:verdana;
       }
nav      {  
        background-color:#eeeeee;
        text-align:center;
        height:300px;
        width:10%;
        float:left;
        overflow:hidden;
       }
article {
        height:100px;
        clear:left;
        width:10%;
        background-color:blue;
        overflow:hidden;
    }
section {   
        background-color:yellow;
        height:400px;
        width:50%;
        float:left;
        font-style:italic;
        overflow:hidden;
           }
aside {
        background-color:red;
        float:left;
        width:40%;
        height:400px;
        overflow:hidden;
    }
footer {    
        background-color:black;
        padding:5px;
        text-align:center;
        color:white;
        clear:both;
    }
aside img
    {
        max-width:100%; 
        max-height:100%;
        margin:0 auto;
        display:block;
    }

And this is my HTML:

<body>
<header>
    <h1 align="center"> Welcome to the official website of Almost Free Furniture</h1>
</header>

<nav>
    <p> <a href="catalog.html">Products</a> </p>
</nav>

<article>
    <p>Hi</p>
</article>

<section>
    <p>Please excuse us while we build our new website.</p>
    <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
</section>

<aside id="aside">  
</aside>

<footer>
    This is a work in progress.<br>
    Copyright AlmostFreeFurniture.
</footer>

I'm guessing the problem is in the fact that I want the yellow div to float next to two floating divs, and that may be impossible. Any tips on how to solve this?

Change clear:left to float:left for article? Not really sure I understand what you like to achive, do you want all divs including the nav to be on the same row? — Cyclonecode
– Cyclonecode, Commented Mar 11, 2015 at 23:02
@Cyclone Already tried, makes the blue box float right of the gray box, and the yellow box float right of the blue one. Edit: What I would like to have is all the divs on the same row , with the blue one below the gray one but still to the left of the yellow one — Luca Giorgi
– Luca Giorgi, Commented Mar 11, 2015 at 23:03
Remove float:left from the gray box and change the style for article as I stated above. — Cyclonecode
– Cyclonecode, Commented Mar 11, 2015 at 23:04
@Cyclone Now the yellow box floats to the right of the blue one, but below the gray box. puu.sh/gwrAg/655d633452.jpg — Luca Giorgi
– Luca Giorgi, Commented Mar 11, 2015 at 23:07

Cyclonecode · Accepted Answer · 2015-03-11 23:19:58Z

1

I would fix this by wrapping the nav and article elements in a separate element:

.left-column {
  width: 10%;
  float:left;
}
nav {  
  background-color:#eee;
  text-align:center;
  height:300px;
  width:100%;
  overflow:hidden;
}
article {
  height:100px;
  width:100%;
  background-color:blue;
  overflow:hidden;
}

The markup would then become like this:

<div class="left-column">
  <nav>
    <p> <a href="catalog.html">Products</a> </p>
  </nav>
  <article>
    <p>Hi</p>
  </article>
</div>

answered Mar 11, 2015 at 23:19

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

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

Comments

Alan Dunning · Accepted Answer · 2015-03-11 23:28:06Z

Why not put a parent around your three elemtns and give it display: inline-block;?

Here is a Codepen for an example of a way to solve your problem: LINK TO CODEPEN

Here is some code too if you prefer to look here:

HTML

Welcome to the official website of Almost Free Furniture

  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <nav>
        <p> <a href="catalog.html">Products</a> </p>
    </nav>

    <article>
        <p>Hi</p>
    </article>

  </div>

  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <section>
        <p>Please excuse us while we build our new website.</p>
        <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p>
    </section>

  </div>


  <div class="inline-div"> <!-- These are the inline-block wrappers -->

    <aside id="aside">ANOTHER</aside>

  </div>

<footer>
    This is a work in progress.<br>
    Copyright AlmostFreeFurniture.
</footer>

CSS

    header { 
  background-color:black;
  color:red;
  height:10%; width:100%;
  padding:1px;
  font-family:verdana;
}
nav {  
  background-color:#eeeeee;
  text-align:center;
  height:300px;
  overflow:hidden;
}
article { 
  height:100px;
  background-color:blue;
  overflow:hidden;
}
section {
  background-color:yellow; 
  height:400px;
  font-style:italic;
  overflow:hidden;
           }
aside {
  background-color:red;
  height:400px;
  overflow:hidden;
}
footer {    
  background-color:black;
  padding:5px;
  text-align:center;
  color:white;
}
aside img {
  max-width:100%; max-height:100%;
  margin:0 auto; 
  display:block;
}

.inline-div { display: inline-block; width: 33%; }

Collectives™ on Stack Overflow

CSS float not working properly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related