CODEWITHSUNDEEP
htmlcss
user4428775
user4428775

Reputation:

Float not working as it should

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.

Upvotes: 0

Views: 54

Answers (3)

potashin
potashin

Reputation: 44581

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

Upvotes: 2

IXI
IXI

Reputation: 51

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/

Upvotes: 0

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

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

Upvotes: 0

Related Questions