Float not working as it should

Question

I am trying to float something to the right but it doesn't work as it should. I am trying to get something like eu-accounts.com > right banner with the Classes.

This is what I've got now

<!DOCTYPE HTML>
<html>
<head>
   <title> Haltqt - Accounts </title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

  <div id="banner">

  </div>

  <div id="content">
    hier komt content
    <div id="product">
       Products will come here
    </div>
 </div>
 <div id="classen"> hier komen de classes
 </div>

 </body>

 <footer> &copy Haltqt-accounts.com </footer>

</html>

and the css:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#banner {
margin:0px;
padding:0px;
width:100%;
height:300px;
background-color:#000; /* deze staat nu op zwart, dit is de banner. dit moeten we op transparant zetten en in de body een wallpaper als achtergrond om het effect te krijgen van eu-accounts.com*/ 
}

#content {
margin: 0 auto;
padding:0;
width: 70%;
background-color:yellow;
}

footer{
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
}

#classen {
width:15%;
margin:0 auto;
padding:0;
float:right;
background-color:red;
}

#product {
margin:5px;
padding:5px;

}

http://jsfiddle.net/y8j5hw5c/

Could you take a look why the class classen is not floating correctly? Thanks.

your #content div is still at block level. So it takes up the whole width, pushing your #classen down. Hint: try to float your #content div and use the browser debugger in the future to pinpoint your problem! — Michelangelo, Jan 12 '15 at 13:43

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You can do something like this as sizes are predefined :

#content {
   margin: 0 0 0 15%;
   padding:0;
   width: 70%;
   float:left;
   background-color:yellow;
}

You should also clear the float for the footer element with clear: both;.
P.S.: You should put footer inside body element.

JSFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 12 '15 at 13:40

potashin

44,205
11
83
107

How could I have overseen this... Thanks:) – Jan 12 '15 at 13:43
when i did this, the footer tag goes in the middle of both content and classen. you should probably add footer{clear: both} – Coding Enthusiast Jan 12 '15 at 13:46
1

@notulysses will do in 2minutes;) – Jan 12 '15 at 13:47
Although this has nothing to do with your problem, you should put your `
` inside the ``.
– mmgross Jan 12 '15 at 13:53

score 0 · Answer 2 · answered Jan 12 '15 at 13:48

I am wondering if there is a special reason why your footer tags are out of your body tags. Add the clear both to the footer. and add float left in the content.

footer{
margin: 0 auto;
padding:0;
width: 70%;
text-align:center;
clear: both;
}
#content {
   margin: 0 0 0 auto;
   padding:0;
   width: 70%;
   float:left;
   background-color:yellow;
}

score 0 · Answer 3 · edited May 23 '17 at 12:31

To add another solution approach, a similar question has been asked and correctly answered here: 2 column div layout: right column with fixed width, left fluid

This method uses an additional container div which surrounds the two columns, to make the left column flexible and allow it to use any remaining space, while the right column keeps its fixed width.

A possible variant for your problem: http://jsfiddle.net/kbe0m9ug/

Float not working as it should

3 Answers3

JSFiddle