Stop CSS floats from overflowing

Question

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.. ]

The div container that has an id of "maincontent" it drops down when I resize my browser. — Bajongskie, Jun 04 '13 at 10:52

score 1 · Accepted Answer · answered Jun 04 '13 at 10:51

1

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.

answered Jun 04 '13 at 10:51

Nitesh

15,425
4
48
60

Thanks. This is what I'm looking for but I have a thing to ask, How floats and table-cell differ from each other? – Bajongskie Jun 04 '13 at 10:56
I think this answer fulfills your doubts about float and table-cell. http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell - @JamesM. – Nitesh Jun 04 '13 at 11:00
Appreciate negative votes. Will be much appreciated if explanations are also provided. – Nitesh Jun 04 '13 at 11:01
@Nathan Lee: You don't explain your answer in no point, although this is highly adviced. Understanding floats and clearing for beginners is a hard topic. Clear explanation should be provided. (I didn't downvote, tho) – kleinfreund Jun 04 '13 at 11:16
+1, can't understand the negative votes here. It probably does the job (haven't tested), is short and to the point. What else is needed? – Darkzaelus Jun 04 '13 at 11:20
Thnx @kleinfreund, but I kept things straight to the point relevant to his issue. So I assume he has an understanding of the things before hand, but if he does not and specifies he did not understood, I provide him with the explanation or the link that clears his doubts as I have done the same here too. Hope justfied. – Nitesh Jun 04 '13 at 11:21
Thnx @Darkzaelus. That is exactly how I do. – Nitesh Jun 04 '13 at 11:23
(not my downvote) It's a good solution, but not a good answer. – cimmanon Jun 04 '13 at 12:17
Thnx @cimmanon. Will appreciate elaboration to the point mentioned. – Nitesh Jun 04 '13 at 12:21

score 0 · Answer 2 · answered Jun 04 '13 at 11:03

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 */
}

score 0 · Answer 3 · answered Jun 07 '13 at 09:30

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.

Stop CSS floats from overflowing

3 Answers3