CODEWITHSUNDEEP
csshtmlcss-float
Bajongskie
Bajongskie

Reputation: 463

Stop CSS floats from overflowing

I have here a code in Dabblet: http://dabblet.com/gist/5705036

I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].

Is there something wrong with my coding?

Do floats proper for layouts ? or I need to use anything else?..

I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]

Upvotes: 1

Views: 103

Answers (3)

Flam
Flam

Reputation: 106

I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.

#contentWrapper {
    width: 992px;
}

Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?

So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.

Upvotes: 0

Bartek Bielawa
Bartek Bielawa

Reputation: 572

First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:

#contentWrapper {
    width: 1000px;
    overflow: hidden; /*scroll / auto it's depends on You */
}

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.

Here is the code.

#maincontent {
    border: 1px solid #BBBBBB;
    border-radius: 5px 5px 5px 5px;
    display: table-cell;
    margin-top: 15px;
    min-height: 400px;
    padding: 2px 6px;
    width: 700px;
}

Hope this helps.

Upvotes: 1

Related Questions