CSS Float vs clearfix

0 Oussama Fahchouch · October 7, 2015
Hi guys,

Can someone help me with my css..

The problem i have:

I floated two different div elements. The first is floated to the left, the second is floated to the right.
Next i wanted to continue my css with the normal document flow and add a new element, but no it didn't behave with the normal document flow..

Sorry, i tried to be as clear as possible. My english is not my mothertongue..

Here i the html code:

<html>
<head>
<title> De Bonte Koe - Uitgaanscomplex WouBrugge</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>

<header class="main-header">
<!-- Logo de bonte koe -->
<div class="logo">
</div>

<!-- Menu knoppen op homepagina uitgaan/restaurant/bioscoop -->
<div class="MenuKnoppen">
<div class="uitgaanMenuKnop">
</div>

<div class="restaurantMenuKnop">
</div>

<div class="bioscoopMenuKnop">
</div>
</div>
</header>

<!-- slider op homepagina foto's uitgaan/restaurant/bioscoop -->
<div id="sliderHome">
</div>

<!-- welkomstekst de bonte koe @ homepagina -->
<div id="welkomstekstDeBonteKoeHome" class="group">
</div>

<!-- welkomstekst uitgaan @ homepagina -->
<div id="welkomstekstUitgaanHome">
</div>

<!-- welkomstekst restaurant @ homepagina -->
<div id="welkomstekstRestaurantHome">
</div>

<!-- contact -->
<div class="contactHome">
</div>

<footer id="copyright">
</footer>

</body>

</html>

 Here i have the css code:


body {
margin: auto;
display: unset;

}

/* Home pagina */
.main-header {
width: 100%;
height: 7.5%;
background-color: orange;
}

/*.logo {
width: 1em;
height: 2em;
background-image: url('../img/logo.png');
background-size: contain;
background-repeat: no-repeat;
margin-left: 15%;
}
*/

#sliderHome {
width: 65%;
height: 45%;
background-color: black;
margin: auto;
margin-top: 5%;
}

#welkomstekstDeBonteKoeHome {
width: 50%;
height: 30%;
background-color: blue;
margin: auto;
margin-top: 5%;
}

#welkomstekstUitgaanHome {
width: 25%;
height: 12.5%;
background-color: orange;
margin: auto;
margin-top: 5%;
margin-left: 18%;
float: left;

}

#welkomstekstRestaurantHome {
width: 25%;
height: 12.5%;
background-color: orange;
margin: auto;
margin-top: 5%;
margin-right: 18%;
float: right;
}

.contactHome {
width: 20%;
height: 10%;
background-color: black;
margin: auto;

}



The last element is acting weird because of the floats i gave to the element before it..

I want to clear/ end the last floated element and continue.., but i can't..

Can someone help?

Thanks in advance.

Post a Reply

Replies

Oldest  Newest  Rating
0 Oussama Fahchouch · October 7, 2015
Btw the html code did act weird when i pasted in thenewboston forum..

It changed somethings, so don't mind that @...
  • 1

CSS

1 follower
About

Cascading Style Sheets, most of the time abbreviated as CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

Links
Moderators