CODEWITHSUNDEEP
csshtmlcss-float
Reza Amya
Reza Amya

Reputation: 89

how float all elements to left and clear right of one to show several elements below together?

We have four div that must shown as below:

|--------|------|
|Big Area|div 1 |
|        |------|-------|
|        |div 2 | div 3 |
|        |------|-------|
|        |
|        |
|        |
|        |
|--------|

I try this:

<html><head>
<style>
#big_area {
    float: left;
    width: 200px;
    height: 200px;
}
#div_1 {
    float: left;
    clear: right;
}
#div_2 {
    float: left;
}
#div_3 {
    float: left;
}
</style>
</head>

<body>
<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>
</body>
</html>

but it doesn't work. when I set clear:left to div 2 my div 2 and div 3 move to end of scene below the Big Area and it is not true result
do you have any solution?

Thanks anyone and thank you Animuson for wiki. I read your Wiki and it describe that i can't use float:right in my case. then I try to say problem in one other way to you.

see I have so many divs (N number of divs) with different width and height. I must show this divs in a row. for example like below:

|-----|-----|-----|-----|-----|-----|-------|-----|
|Div 1|Div 2|Div 3|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-----|-----|-----|-------|-----|

I float all of divs to left and then all of them show in one row (this row break automatically in related of my windows width). but I need break before some of divs certainly. for example I need break after Div 3.
Then I try adding clear:left to my div 4, it is working so good and my div 4 and any number after that (div 5, ..., N-1, N) show in new line but if my div 1 has big height (like Big Area) I won't my other divs go to below of Big Area but they go with clear:left solution. see below result:

|-------|-----|-----|
| Big   |Div 2|Div 3|
| Area  |-----|-----|
|(div 1)|
|       |
|-------|
|-----|-----|-----|-------|-----|
|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-------|-----|

cause I try to add <br /> tag after div 3 and then div 4 and any other divs after that moved to new line but sadly it shown as below:

|-------|-----|-----|
| Big   |Div 2|Div 3|<br />
| Area  |-----|-----|
|(div 1)|Div 4|
|       |-----|
|       |Div 5|
|       |-----|
|       | ... |
|       |-----|
|       | N-1 |
|       |-----|
|       |  N  |
|       |-----|
|       |
|-------|

Oh I find The Answer ..!!!!!! :D :) :D/
you can see my answer soon below

Upvotes: 0

Views: 435

Answers (3)

Reza Amya
Reza Amya

Reputation: 89

I find the answer :D
I was adding <br /> after div 3 in my javascript code with using of document.createElement like below:

var temp = document.createElement('br');
document.getElementById('all_of_div_container').appendChild(temp);

I change my code to below and it is work so so good:

document.getElementById('all_of_div_container').innerHTML += "<br />";

this ways add same code to my HTML but I don't know why appendChild(temp) show all of float:left items in new line (as I say and draw in my question) ...!
anyway innerHTML work so well.

thanks
Have fun ;)

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

If it's an option, this would be a far simpler problem to solve if you put divs 1, 2, and 3 in a container. All divs with the possible exception of div 1 could be floated left.

<div id="big_area">big area</div>
<div id="small_area">
    <div id="div_1">div 1</div>
    <div id="div_2">div 2</div>
    <div id="div_3">div 3</div>
</div>

Otherwise, I think you'll have a very tough time finding a reliable, cross-browser solution. If the divs have fixed heights and widths, you could probably manage something with absolute positioning, but that's not an ideal way to go.

Upvotes: 1

mawburn
mawburn

Reputation: 2336

CSS:

#big_area {
     display: inline-block;
     float: left;
     width: 200px;
     height: 200px;
    } 

​#div_2, #div_3 {
    display: inline;
   }​

HTML: 

<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>

JSFiddle Link

Unless you're trying to do more with it that you're not saying, this should work fine. Clear in this case is unnecessary. Unless you specify the element to be inline or inline-block, the line is going to break after div_1 by default.

Upvotes: 1

Related Questions