I wrote below code to display 3 divs in a 600x400 container, but got below problem. Please help.
<DIV A style="float:left;width:200px;;height:200px;"></DIV>
<DIV B style="float:left;width:400px;;height:400px;"></DIV>
<DIV C style="float:left;width:200px;;height:200px;"></DIV>
Instead you need to float a container that contains the two smaller divs, a-la:
<div style="float:left">
<div style=";width:200px;;height:200px;"></DIV>
<div style="float:left;width:200px;;height:200px;"></div>
</div>
http://jsfiddle.net/ExplosionPIlls/r7b7e/
If A and C are both floated, they won't wrap anyway unless the width of the container is small enough to make them wrap. However, the container (of all three divs) also needs to include the larger div, which makes that impossible. Instead you need to wrap them in their own container.
Your div B should be float: right;
Related
This is a bit complicated, and is a Chrome specific issue (jsFiddle for reference).
I have some html that is a container which houses three DIVs:
one header div (which must grow and shrink to the size of the container)
one "child" div (which is always in the top left corner, but otherwise acts like a child div)
and one "child-container" div that houses zero-to-many child divs (which should float left and then wrap after the fifth item)
<div id="container">
<div class="header">cool header</div>
<div class="child">child 0</div>
<div id="child_container">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
</div>
</div>
The issue that I'm having is when there are 5 or fewer "child" divs. If there are more than 5 "child" divs, everything formats properly. If there are fewer than 5 "child" divs, then the last "child" will always appear underneath the "child 0" div. What I need is the "child" divs to NOT warp to a second line until there are greater than five children.
I've tried a several different approaches (ie, different display types, floating containers, not floating all children, etc.), but no matter what I try, either the "header" class doesn't size properly or the children don't wrap properly.
Suggestions?
Solved Check Demo
Giving min-width: attrib solves the issues check the different wrap numbers
Its the Container width which dictates when it wraps you currently gives max limit
EDIT:Even though its chrome specific issue in chrome it is solved by giving min-width:
Demo Which Shows the difference with and without min-width
I have a total of 3 divs - how to get them to appear as per the following image.
I can get 2 together using float:left, however withe 3rd one keeps sitting underneath div A.
Any ideas?
Thanks
Wrap B and C in additional div similar to A (with float left as well)
Check out masonry.js.
The reason why floats cannot be used in this case is that the float will clear after the tallest element in the row, therefore bumping element C under element A.
Alternatively, you can place A in a sub-parent floated to the left, and B and C in a sub-parent floated to the right. However, this makes dictating the order of items in a responsive/fluid layout difficult. The solution can be simplified as follow:
<div>
<div class="col">
<!-- A -->
</div>
<div class="col">
<!-- B + C -->
</div>
</div>
For the CSS:
.col { float: left; width 50%; }
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
How to (top) align 3 div that should be relative to a previous div (but not between them)?
I can't use floats or position:inline-block (if you set display:none on 2 divs the last one shouldn't move).
position:absolute neither because there's a relative footer underneath.
vertical-align:top doesn't work using spans - any workaround?
I tried using a wrapper but it can't work cause the height of the divs is not fixed.
The height of the wrapper gets completely ignored anyway (by the following footer) unless Im using relative children.
Any ideas?
HTML
the order is important and the wrapper is optional (to position the side divs)
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
<div id="footer"></div>
CSS
#left {float:left}
#middle {margin:0 auto}
#right {float:right}
#footer {clear:both}
unless someone comes up with something easier
ill accept my answer in 24h
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.