The situation is:
HTML:
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS:
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
The result:
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
http://www.w3.org/wiki/CSS/Properties/float
leftThe element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top.
The content of #b is acting as it should. It floats to the right side of the floated element preceding it.
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
If you float one element, the next element will "touch" it if there is place for it and it is a block level element (native or set by CSS).
If you want the elements "not" next to each other, than don't use float! Keep in mind that they have to be block level to go underneath each other.
Float does not "lift" element up, like for example position: absolute would do.
check out this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I think z-index statement may also be useful
ADDENDUM
<style type="text/css">
<!--
#id {
position:relative;
}
#a{
/* float:left; */
position: absolute;
top:0%;
left0%;
width:800px;
height:150px;
background-color:#CCC;
z-indez:1;
}
#b{
position: absolute;
top:0%;
left0%;
width:1000px;
height:100px;
background-color:#9CC;
z-index:-1;
}
does the trick (in chrome, ff, IE6 ) I couldn't get it to work until I gave id=b a negative z index trust thats helpful
The floated element floats to the left of non-floated elements like the blue element. To force the blue element below the floated element, you could apply clear: left; to it.
If both of your div ID's have float:left assigned then the second div #b will follow suit and go beneath #a
Add this code:
float:left;
to #b style
Give display block to both #a, #b
Related
My understanding was that a div with clear:both; would not have any floating sibling divs positioned on either side of it. In this example I have 3 sibling, left floating divs inside of a container div with overflow:auto. There's enough room for all of them to be side by side.
Link to jsfiddle below.
When I apply clear:both to the middle div it moves it to the next line (as expected) however the div to the right of it also moves down and remains on it's right side despite that area being cleared. I'd expect each div to be on a new line.
Further more if I just add clear:right; to the middle div it remains where it is (in line with the div to its left - as expected) and the div to its right also stays beside it. I would have though the right div would have moved to a new line.
This behaviour seems to contradict what clear is supposed to achieve by preventing floating sibling elements from being beside each other. Can anyone explain this?
jsfiddle here: https://jsfiddle.net/2tfgwmek/1/
HTML
<div class="container">
<div class="left">Left Div<br>float: left; </div>
<div class="middle">Middle Div<br>float: left; clear:both; </div>
<div class="right">Right Div<br> float:left </div>
</div>
CSS
.container {
width:300px;
overflow:auto;
border:solid 2px black;
}
.container > div {
width:90px; height:90px;
border:solid 1px red;
background:grey;
float:left;
color:white;
}
.middle {
clear:both;
}
clear only applies to elements that precede the element you've applied clear to.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
And the left or right (or both) values refer to the direction of the float on the previous element. So here, the only float you can clear on the middle div is the one that preceded it, and that element was floated left, so clear: left is all you can use that will affect the layout. clear: right won't do anything in your example.
If there were 2 divs before the middle one, and one was floated left, and the other right, then you could use clear: left or clear: right (or clear: both) to affect the layout.
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
I was hoping I wasn't a beginner with css, but I can't understand why the following happens...
You can see an example here
I wish to display 2 separated div on the same "line" :
First div must 100% width to the second
Second div at the extrem right of the first
So, I've done the following
// CSS
.div2 {
background:#EDEDED;
float:right;
}
.div1 {
background:#CCC;
}
.div1, .div2 {
padding:4px;
margin:4px;
}
.round {
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>
But the .div2 is inside the first div...
How to display something like following ? (Like I thought it should be displayed...)
Any help appreciated...
EDIT : SOLUTION
By user570783
.div1 {overflow:hidden;}
Work like a charm, but not really documented, why this works ?
float does what is says. float. as in stuff can be underneath it. Text will be wrapped, but borders won't
if you know the width of "Test 2", you can add a "margin-right: x;"
OK, there are many solutions here involving, floats, inline-block, margins and borders but all require knowledge of at least one element's size.
However!
There's a trick you can do here. If you add 'overflow:hidden' to the first div it will force the div to 'block formatting context'
This will get the result you're after, with dynamic sized right floating element.
To make this work in IE5 and 6 you need to trigger 'hasLayout' on the first element, so position: relative;
fiddle
How can i fix the unwanted margin of the "right" div.
The right floated div is margined like you can see here:
JSFIDDLE: http://jsfiddle.net/s9Ssh/1/
The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.
HTML:
<div class="main">
<div class="left">left</div>
<div class="mid">
Vpis podjetja
|
Iskanje
</div>
<div class="right">right</div>
CSS:
.main {
text-align:center;
width:100%;
}
.left {
float:left;
}
.mid {
}
.right {
float:right;
}
Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/
I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.
Edit
Fixed padding on left and right div's, so they are not too close the side of the page.
http://jsfiddle.net/s9Ssh/3/
Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).
Alternatively you can also float the middle element or set it to inline/inline-block.
EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P
try to add display: inline-block; to .mid element
example fiddle : http://jsfiddle.net/XSdJA/
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}