I've written this code:
<body>
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
Div2 -> Not Floated
</div>
</div>
And result is the below image, I could achieve this result with using -webkit-flex display which works just in chrome, is there any idea which can give me the same result.
By the way, I don't want to use margin-left for Div2 and position absolute either.
If you don't mind specifying a static width for your left side you can achieve the flex type layout for the right with this:
<div style="display:table;width:100%;">
<div style="display:table-cell;width:130px;vertical-align:top;">
<div style="padding:10px;height:500px;background-color:#ff6a00;">
Div1
</div>
</div>
<div style="display:table-cell;vertical-align:top;">
<div style="padding:10px;height:600px;background-color:#5c64bb;">
Div2
</div>
</div>
</div>
http://jsfiddle.net/LHZKp/
I was able to get a similar effect using display: inline-block; on the second div and percentage widths.
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;">
Div2 -> Not Floated
</div>
</div>
fiddle
Related
How do I align two divs such that one is to the extreme left and other is to the immediate right of center.
Note that its not in center. Its just sticked to center . Something like this
div |div
here | represents the center of the page
I tried giving width:50% but on page resize its not giving expected result and all divs are rearranging differently. I tried giving margin-left and right as well but same problem
<div class="help-bar-div">
<hr>
<div style="display:inline-block;">
<div style="display:inline-block;margin-left:0;width:50%; margin-right:0">
text1
</div>
<div style="display:inline-block;float:right; margin-left:-11px;">
text2
</div>
</div>
</div>
you can use display flex on the container and flex-grow to fill equal spaces
<div style="display:flex;">
<div style="flex-grow: 1;">
text1
</div>
<div style="flex-grow: 1;">
text2
</div>
</div>
I have some divs in my layout having 50% width. Each div may have a variable height depending on its content. What I would like to do is "floating" them to the top. This means that each div fills gaps with above divs. Something like that:
Is it possible to achieve this effect with some CSS? Of course, width can also be set to other values, not only 50%. Thanks in advance.
You can change the html markup as follows
<div class="left col50">
<div class="first"></div>
<div class="third"></div>
</div>
<div class="right col50">
<div class="second"></div>
<div class="fourth"></div>
</div>
and the css
.col50{
width:50%;
}
.right,.left{
float:left;
}
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
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