0 points
Submitted by hkapur97
about 9 years

2.5 : empty div

If the <div class="clear"></div> has nothing inside it, then how come the webpage is being affected?

Answer 5045db5b29d01a0002042be1

2 votes
Best answer

Permalink

It affects the page because of the clear:both CSS property defined for the .clear class. It clears floats so that none of the following elements are affected by them. For a deeper understanding, read this excellent illustrated article. If you don’t have time to read it, bookmark it for later, now just scroll down to “Clearing the Float”.

points
Submitted by Alex J
about 9 years

Answer 5045e75fcb92840002046083

0 votes

Permalink

###Okay, so I’m doing the same for a local webpage I’m creating for practice, and it doesn’t seem to work.


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Niels Bohr</title>
</head>

<body>
<style>


.info {text-align:left; font-family: georgia; font-size:20px; font-style:normal; text-decoration:blink; font-weight:bolder; padding:0; margin: 5px; width: 80%; float:left;}

div.contact {text-align:right; font-family: Verdana; font-size:15px; font-style:normal; text-decoration:blink; font-weight:bolder; padding:0; margin: 5px; width: 20%; float:right;}

div.clear {clear:both;}

</style>

<center><h1>Sir Niels Bohr</h1></center>

<center><h2>The best there ever was, the best there ever will be ...</h2></center>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<div class="top">

    <div class="info">
        <p>Sir Niels Bohr was born in Denmark on 7 October, 1885</p>
        <p>He was a physicist who made foundational contributions to understanding atomic structure and quantum mechanics, for which he received the Nobel Prize in Physics in 1922</p>
    </div>
    <div class="contact">
    <ul>
        <li>Phone Number : +911(011)-237968954</li>
        <li>E-mail : <a href="mailto:[email protected]">[email protected]</a></li>
        <li>Website : <a href="sirnielsbohr.edu">sirnielsbohr.edu</a></li>
    </ul>
    </div>
    <div class="clear"></div>
</div>

</body>

</html>

####When I test this out, they don’t come in the format-

 _   _
|_| |_|

####Rather, they come like this -

 _ 
|_|
     _
    |_|

###What is the problem?

points
Submitted by hkapur97
about 9 years

Answer 50772f4f3babfd02000006a4

0 votes

Permalink

If you want to get the 2 divs next to each other you may remove the margin, because it is adding an extra 5px to the div.

points
Submitted by aeterne
about 9 years

Answer 50b7198d68283ca319000f6f

0 votes

Permalink

@hkapur97: Not sure if you’ve already worked out a solution or not, but as aeterne pointed out, setting any margins add to the size you’ve already specified for the boxes. For more details, check out the CSS Box Model page on W3Schools. They’ve got a nice write up on it.

In cases like this where you want to use percentage widths though, it gets a bit more tricky. My preferred solution is to wrap the elements you’re trying to line up in another div and assign the floats to that. See this Fiddle for an example.

points
Submitted by Andre
almost 9 years