CODEWITHSUNDEEP
htmlcss
Jeffrey Muller
Jeffrey Muller

Reputation: 850

Properly clear floating elements

I am trying to design a bar in which all elements are floating. I have no problem to do this part, but the problem is, when I try to add a new block under this one, I have either a space before my first element in this new block, or a space between my two blocks when I add clear: both;.

I already tried with new clearfix hack, but it does not work in my case.

Here is a small codepen I made, to show you the problem I have : http://codepen.io/anon/pen/piDEK. I would like to avoid to have a space between my two blocks, and my h1 should be at left (and not after my ul, you can try by removing the clear, in my codepen), obviously.

Thank you for your help.

Upvotes: 3

Views: 111

Answers (4)

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Reputation: 2804

Just add a display:none to the clearfix DIV's style to remove the unwanted whitespace.

<div style="clear: both; display:none"></div>

You will more than likely have more than one of these on your site so I would recommend using a class instead of inline styling.

Upvotes: -2

demonofthemist
demonofthemist

Reputation: 4199

Use clear before closeing each parent element which as floated childrens.

Use 

<div class="clear"></div>

& CSS

.clear{clear:both;}

I've used this after last li, after ul & after .top-bar div.

Edit:

The white line between two divs is due to #top-bar #left-menu li element's line height is more than parents height Use,

#top-bar #left-menu li {line-height:63px;}

Here is modified codepen e.g. DEMO

Upvotes: 1

SW4
SW4

Reputation: 71150

You could always add overflow:hidden; to #topbar (and/or #content)then remove your separate clearing div, so the revised CSS would be:

#top-bar {
    width: 100%;
    height: 65px;
    /* border: 1px solid #e6e6e6; */
    padding: 0 25px;
    background: green;
    overflow:hidden;
}

The purpose of overflow:hidden is not to clear floats per se, but to control child content containment by establishing a new block formatting context(BFC) flow root, one feature of BFCs is float containment.

More on BFCs from MDN

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10265

you can clear float by giving overflow:hidden; on parent element. check the DEMO.

Like in your case use in on section element.

section{overflow:hidden;}

Upvotes: 2

Related Questions