CODEWITHSUNDEEP
csshtmlcss-float
Luca Giorgi
Luca Giorgi

Reputation: 1010

CSS float not working properly

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?

Upvotes: 0

Views: 671

Answers (2)

Alan Dunning
Alan Dunning

Reputation: 1351

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%; }

Upvotes: 0

Cyclonecode
Cyclonecode

Reputation: 29991

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>

Upvotes: 1

Related Questions