On this page there's a #container div that has a white background. This white background doesn't appear behind the 5 floated boxes (with titles "Latest", Music Festivals, Alerts, etc.) even though those boxes are children of #container and don't specify a background colour of their own, why?
The parent container does not expand to fit floated elements. You need a way to "clear" the float to end the floating after the child elements. See this page:
http://www.quirksmode.org/css/clearing.html
you should add an <div style="clear:both"></div> after last floated element, so that your floated elements affect on increasing your #container block's height. otherwise they "fall out" from your container box.
You just need to clear your floats after using your .box class:
.box {
float: left;
width: 30%;
text-align: justify;
margin-right: 25px;
}
Here's the simplest way possible:
<div id="main">
<div class="box"></div>
<div class="box"></div>
<br style="clear: both; display: block;" />
</div>
Related
I have boxes that I want to float left, so they would be aligned side by side. But I have a problem. If I set float: left; I get this:
left aligned
They jump out of parent div (gray div). If I set float: none; I get this: float: none
Boxes stay in div, and div stretches with them, but they are one under another, which I don't like. How would i achieve left aligned boxes inside div?
CSS of the boxes:
.parent {
float: left;
width: 200px;
background-color: white;
border: 1px solid rgb(230,230,230);
margin: 10px;
}
You have to use overflow css rule. In the grey box add following css property:
overflow:hidden;
After applying this property you will get the items inside grey box and they will not fall outside it.
You need to give <div style="clear:both"></div> to inside parent div in last.
<div class="parent">
your code
<div style="clear:both;"></div>
</div>
whenever you use float you need to clear it by assigning clear: both to its parent
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
So here are two identical divs:
HTML
<div id="left"></div>
<div id="right"></div>
CSS
#left, #right
{
width: 100px;
height: 40px;
border: 1px solid gray;
display: inline-block;
}
These render just fine, as two identical boxes side-by-side (fiddle: http://jsfiddle.net/URy59/).
But with text in one div, and none in the other, they're misaligned! (fiddle: http://jsfiddle.net/URy59/1/)
This...
<div id="left"></div>
<div id="right">Right</div>
...results in:
This behaviour is reproducible using <span> as well.
What causes this, and why? What's a good solution to this?
The short answer: set the vertical-align property to top.
The longer answer: An inline element's default vertical alignment is baseline. When your divs have no content, they line up fine. However when you added the text, the browser then will move the div downward so that the text sits on the baseline:
By changing the alignment to top, you align the divs the way you need.
jsFiddle example
You need to vertically align your elements:
#left, #right {
...
vertical-align: top;
}
JSFiddle demo.
I have a container element and two sub elements in it placed in as float: left, and float: right. The left-floated element has one line of text. The right-floated element has two lines separated by . Now, when this is deployed, the container takes up on the height of the left-floated element, so the second line in the right-floated element appears outside the container. What can we do to prevent this from happening?
What all you need is to have a display: inline-block; or overflow: hidden; property in the container. Check this JSFiddle
<div id="m">
<div class="a">a<br>c</div>
<div class="b">b</div>
</div>
#m{
background-color: gray;
width: 100%;
overflow: hidden;
}
.a{
float: left;
}
.a{
float: right;
}
Use a clearfix implementation. That fix is usually attached by a class name to the parent DIV that you want to expand to contain floated child elements. For example see http://www.webtoolkit.info/css-clearfix.html
I want to position a paragraph to the right of an <iframe> of a Google map.
I do not know how to show my code, so here is a screenshot of what I want:
Just use the float style. Put your google map iframe in a div class, and the paragraph in another div class, then apply the following CSS styles to those div classes(don't forget to clear the blocks after float effect, to not make the blocks trouble below them):
css
.google_map{
width:55%;
margin-right:2%;
float: left;
}
.google_map iframe{
width:100%;
}
.paragraph {
width:42%;
float: left;
}
.clearfix{
clear:both
}
html
<div class="google_map">
<iframe></iframe>
</div>
<div class="paragraph">
<p></p>
</div>
<div class="clearfix"></div>
You have two options, either float:left or display:inline-block.
Both methods have their caveats. It seems that display:inline-block is more common nowadays, as it avoids some of the issues of floating.
Read this article http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ or this one http://www.vanseodesign.com/css/inline-blocks/ for a more in detail discussion.
You can simply use a div to make a container and display: flex; to make the content appear side-by-side like this:
.splitscreen {
display: flex;
}
.splitscreen .left,
.splitscreen .right {
flex: 1;
}
<div class="splitscreen">
<div class="left">
Content
</div>
<div class="right">
Content
</div>
</div>
None of these solutions seem to work if you increase the amount of text so it is larger than the width of the parent container, the element to the right still gets moved below the one to the left instead of remaining next to it. To fix this, you can apply this style to the left element:
position: absolute;
width: 50px;
And apply this style to the right element:
margin-left: 50px;
Just make sure that the margin-left for the right element is greater than or equal to the width of the left element. No floating or other attributes are necessary. I would suggest wrapping these elements in a div with the style:
display: inline-block;
Applying this style may not be necessary depending on surrounding elements
Fiddle:
http://jsfiddle.net/2b0bqqse/
You can see the text to the right is taller than the element to the left outlined in black. If you remove the absolute positioning and margin and instead use float as others have suggested, the text to the right will drop down below the element to the left
Fiddle:
http://jsfiddle.net/qrx78u20/
For your iframe give an outer div with style display:inline-block, And for your paragraph div also give display:inline-block
HTML
<div class="side">
<iframe></iframe>
</div>
<div class="side">
<p></p>
</div>
CSS
.side {
display:inline-block;
}
Use either float or inline elements:
Example JSBIN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>float example</div>
<div><div style="float:left">Floating left content</div><div>Some content</div></div>
<div>inline block example</div>
<div><div style="display:inline-block">Some content</div><div style="display:inline-block">Next content</div></div>
</body>
</html>
Like this
.block {
display: inline-block;
vertical-align:top;
}
JSFiddle Demo
You can use float:left to align div in one line.
Fiddle
You can float the elements (the map wrapper, and the paragraph),
or use inline-block on both of them.
Wrap the iframe in a class, float that left.
The paragraph with then be forced up and to the right as long as there is room for it.
Then set your paragraph to display:inline-block, and add some left margin to tidy it up.
<div class="left">
<img src="http://lorempixel.com/300/300" /> <!--placeholder for iframe-->
</div>
<p>Lorem Paragraph Text</p>
.left { float: left; }
p { display: inline-block; margin-left: 30px; }
Here's a fiddle: http://jsfiddle.net/4DACH/
Put the iframe inside the <p> and make the iframe CSS
float:left;
display:inline-block;
give your boxes the class foo (or whatever) and add the css
.foo{
float: left;
}