CODEWITHSUNDEEP
htmlcss-floatwidth
Amin
Amin

Reputation: 2043

left float divs issue

I have two questions on left floating divs inside a parent div. I spent more than 5 hours on this tried different things, searched on internet, but could not find a solution! thought somebody here might be able to help.

this is the scenario:

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;"><label style="text-align:center"> This is the title div </label></div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div class="left_floating" style="height:20px; width:50px;"> 2 </div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>

issue 1: What I want: the title to be at the center of the other three divs all the time/ regardless of the size of the screen. What happens: if you shrink the size of the screen, at the point that there is not enough space for the div 3, it goes down (this is what I want), but there will remain some gap at the right of the div 2 that makes the width of the parent div greater than 100px (width of div 1+ width of div 2), i.e., the parent div is not tight from the sides. this makes the title to be not at the center. how can I fix this?

issue 2: what I want: when the screen shrinks and the div 3 goes down, it should go under div 1. what happens: div 3 goes under div 2 because the height of div 2 is smaller than the height of div 1. Note that if the height of div 2 was greater than the height of div 1, the result would be the desirable result. any suggestions?

I do prefer css solutions if there is any.

Thanks

Upvotes: 0

Views: 134

Answers (2)

maceyj2
maceyj2

Reputation: 666

You can achieve what you want by using media queries. Here's an example using the markup you provided: http://jsfiddle.net/VQMrY/1/

Note the CSS changes I made: making the label a block element and the media queries (based off a screen width that will show you the results). I put borders around the elements just so they're easier to see. I've also added a clr class in the parent container.

In the media query I set the div '2' to float right so you don't have that gap and then '3' to clear both so it will fall below '1'. Hopefully this helps! 

@media screen and (max-width: 3550px) {
 .second {float: right;}
 .third {clear: both;}

}

Just edit the max-width to what you want the breakpoint to occur at.

Upvotes: 1

Tim Edgar
Tim Edgar

Reputation: 2143

Regarding Issue 1: You'll probably want to address this through media queries. It sounds like at certain resolutions, you want the css to behave differently, which is what media queries are great for. You'll likely want something along the lines of

@media (max-width: n px) {
    #parent_div {
        width: 100px;
    }

@media (min-width: n+1 px) {
    #parent_div {
        width: 150px;
    }

Regarding Issue 2: You can create a div to wrap div 2 to give it a greater static height so div 3 floats appropriately. Just make the wrapper float left and div 2 to not float.

<div id="parent_div">
<div class="left_floating" style="height:20px; width: 100%; clear:left;">
    <label style="text-align:center"> This is the title div </label>
</div> 
<div class="left_floating" style="height:50px; width:50px;"> 1 </div>
<div style="float:left; height:50px; width:50px;">
    <div class="left_floating" style="float:none; height:20px; width:50px;"> 2 </div>
</div>
<div class="left_floating" style="height:20px; width:50px;"> 3 </div>
</div>

Upvotes: 1

Related Questions