<html>
<body>
<div id="content1">
<div id="text1">This text floats left</div>
<div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>
When I try to do this, and try to make a layout like a table with two rows with the text floating left and the image floating right in the top row, all that comes up is that the content2-div is squashed into the content1-div. How can I keep them separate?
You need to use clear:both; on your #content2 div
If you really wanna learn everything about floats, check out this amazing tutorial: http://css.maxdesign.com.au/floatutorial/
Use clear:both; on your content#2
Apply:
#images1{
float:right;
}
#content2{
clear:both;
}
and fix your html markup
<div id="images1"><img src="img.jpg" /> <!--Floats right-->
close the div:
<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
You forgot to close your <div id="images1"> :)
use 'clear:both' on content2 div
I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>
clear your floats.
Here is an article describing whats going on: Clearing A Float Element
You have not closed off <div id="images1">. If this div is closed and the Content divs arenot float left then it should work.
overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)
Related
Given the following example at:
http://jsfiddle.net/DLHGs/1/
Is it possible to have the bye element to render below hi, but still remain to the right of the red block? (Rather than on the same line)
To clarify, I dont want to have any uses of <br />, and the float:left applied to hi is not removable, and I dont want to set any other width or height properties other than those already specified.
Edit:
Solution: http://jsfiddle.net/T4XMq/
What about this?
I added float:left to the div wrapping the "hi" and "bye" and also set "bye" to clear:left
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left">
<div style="float:left;">hi</div>
<div style="clear:both;">bye</div>
</div>
</div>
Well i can see that a normal clear:both put bye way under the red box. If you can not make hi float:right instead, and use <div style="clear:right">bye</div>, a simple linebreak will do in this case:
<div style="float:left;">hi</div>
<br />
<div>bye</div>
You can wrap both elements in a div with float:left.
<div style="float: left;">
<div>hi</div>
<div>bye</div>
</div>
Fiddle: http://jsfiddle.net/DLHGs/8/
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left;">
<div style="float:left;">hi</div>
<div style="">bye</div>
</div>
</div>
<div id="contenetarea" style="width:1000px; margin:auto">
<div id="mainarea" style="width:650px;float:left;">
</div>
<div id="sidebar" style="width:350px;float:left;">
</div>
</div>
I want contentarea height=max(mainarea.height,sidebar.height)
I have a problem with google cse result page..
How can i fix it?
Is there a way to do this: mainarea.height=sidebar.height=max(mainarea.height,sidebar.height)
Try adding overflow: hidden; to the #contentarea. That will cause it to wrap everything inside of it, even floated elements.
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
Say I have this html code:
<html>
<body>
<div id="Div1" style="position:relative">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
</body>
</html>
What should I do to make Div2 always below Div1 regardless of the content of Div1? Because the span uses position:absolute in Div1, the content of Div2 appears above the content of Div1.
The reason div2 displays above div1 is because div2 is absolutely positioned. That means that div1 doesn't participate in the normal document flow, as if it was pulled out of the document. So, div2 shows up at the top, then your absolute positioning pushes div1 down to 100px.
Take the absolute positioning off of div1, then use margins or padding to move it down to the desired location. That way, the normal html rendering will place div2 below div1.
If you're forced to absolutely position div1, then you need to absolutely position div2 as well. You may need to use javascript to figure out the height of div1 and set the top of div2 appropriately.
<html>
<body>
<div id="Div1" style="position:absolute; top: 100px;">
<span>My text</span>
</div>
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>
Why not do this ?
<div id="Div1" style="margin-top:100px">
<span>My text</span>
</div>
<div id="Div2">
Test
</div>
I don't quite get why you are doing it that way. Could you explain a bit more what you're trying to do? I'm sure there's a better way
Others have answered this question correctly about position:relative vs. position:absolute and page flow in the container div.
Just to add to the answer. I found the following tutorial really helpful when I was learning about positioning in CSS.
Learn CSS Positioning in Ten Steps
Jeff: div is as standard block elements, so that wont make any difference.
You could try:
<div id="Div1" style="position:relative; display:inline-block">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
do you want div2 below div1 or at the very bottom of the page? if you want it below div1 then add
clear:both;
to div2.
if you want it fixed to the bottom of the page then use a fixed position property on the div2
Maybe something like this?
<html>
<body>
<div id="Div1" style="position:relative">
<div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>
</div>
</body>
</html>
use display:block; on those divs
I have a div that seems to not be wrapping its inner content
http://c5.dealercontrol.net/inventory/p1
the div id="container" has a black bg and should be wrapping the inner content how can I get it to show the style around all the inner content...
You need to put in a "clear" div or property in your html/css. The code you need is below and i have typed quick example as to where to place it.
<div style="clear:both"></div>
You would place this tag inside your container div, but after all of the inner contents.
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div style="clear:both"></div>
</div>
Hope it helps...
This may be unrelated, but it seems that <div id="sort-results"> is missing its closing tag.