When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/
Related
I've a 3 column layout. My issue is that content in the second <div> populates from the bottom, as you can see in this fiddle. I would like to align it's content to the top.
Following is the corresponding html
<div class="user-info" style="width: 100%;">
<div id="image-container">
<img src="image.jpeg" height="200px" width="200px">
</div>
<div id="info">
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
<div class="info-item">
<div class="info-attribute">tullsy</div>
</div>
</div>
<div id="button-container">
<input type="button" id="edit_button" value="edit" class="button" onclick="function()">
<br>
</div>
</div>
and css
#image-container {
display: inline-block;
width: 100;
}
#info {
display: inline-block;
}
#button-container {
display: inline-block;
float: right;
padding: 10px;
}
I can fix this issue by applying display: flex; for the container, however it seems I can't float elements inside a flex container.
I've managed to achieve what i want using <br>, as you can see in this fiddle. But i want to achieve the same without using <br>s or fixed padding.
If i understood correctly,
First of all you need to apply a height to the container #info, (So you can avoid using <br>s to add height) Otherwise it'll shrink wrap to the height of it's child items.
Then you can apply vertical-align:top; for aligning the inline-block child items in it to the top without using <br>s
Demo
I have a problem in my website
I have a big <div> with brown background and it has no height and have 3 <div> elements inside it, and that big <div> should not have absolute position.
I tried to fix that using float, but when I use float left/right that brown background is no longer visible!
Below is a simple code for understanding my problem :
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You do not need to float the elements, all you need to do is use display:inline-block;
As the float object basically means your box model loses it's height value as it no longer is relative to its parent. If you want to go the float method make sure you put a <br class="clr-b"> where .clr-b { clear:both; }
This might be causes of floating. You could resolve your problem by just applying overflow:hidden; styles to your big div.
Else, you could use clearfix method (clear: both;).
<div id="bigDiv" style="background-color:brown; overflow:hidden;">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You can use floats:
http://jsfiddle.net/bKVuc/
#bigDiv {
width: 100%;
overflow: hidden;
}
#right, #midle, #left {
float: left;
width: 33.333%;
height: 100px;
}
Try this:
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
<div style="clear:both;"></div>
</div>
You can top float by using style:
<div style="clear:both;"></div>
In case the big div is floated with height:auto, the element should be floated in order to stuff the big div. Or the big div acts as if there is nothing in it(height=0), so the background disappears.
I have div's inside a div
<div id="out" align="center">
<div id="in1" align="left">111</div>
<div id="in2" align="left">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" align="left">bbbb</div>
<div id="in4" align="left">6516519191</div>
<div id="in5" align="left">apple</div>
<div id="in6" align="left">ii</div>
</div>
The expected result is a div with size=(max inside div size) which is centered. Then items inside it are all aligned left:
111
aaaaaaaaaaaaaaaaaaaaaa
bbbb
6516519191
apple
ii
I don't want to give width to the outer div since I have no idea about size of the items from before.
is there any way?
You can by inserting another (outer) container div.
Outer div container: width 100% and centered text alignment;
Inner div container: inline-block and left text alignment
CSS
#outerContainer {
width: 100%;
text-align: center;
}
#innerContainer {
display: inline-block;
text-align: left;
}
HTML
<div id="outerContainer">
<div id="innerContainer">
<div id="in1">111</div>
<div id="in2">aaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
Running Demo: http://jsfiddle.net/nvMmx/
First, there is no "align" attribute for div's.
The information you are providing looks like tabular data. In that case, a table should be used, not div's.
Set the outer width:100%;
Or define the inner width otherwise
CSS
.abc{
float:left;
width:100%;
}
HTML
<div id="out" align="center">
<div id="in1" class="abc">111</div>
<div id="in2" class="abc">aaaaaaaaaaaaaaaaaaaaaa</div>
<div id="in3" class="abc">bbbb</div>
<div id="in4" class="abc">6516519191</div>
<div id="in5" class="abc">apple</div>
<div id="in6" class="abc">ii</div>
</div>
I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
Is there a simple way to do this without resorting to positioning things absolutely?
You could apply a text-align: right to the container and a display: inline-block in place of the floating:
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
DEMO
Using display:inline-block might not work as expected with elements of variable height.
So you might want to use:
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
See: demo of both -- inline and float-float.
You could give float: right to the outer div. And the display style of the inner div is inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
Float your elements to the left.
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the width for each of these divs.
What is your reasoning behind floating them to the right?
I don't really understand why my float: right; div is below container div. I have no idea how to fix this. Can someone please explain? I had this problem long time ago on another website, but totally forgot how I managed to fix it if I did it at all. I want it to be inside the container of course.
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
</div>
-
#menu
{
width: 960px;
height: 70px;
margin: auto;
background-color: blue;
}
#menu .thumb
{
background-color: aqua;
float: right;
height: 60px;
width: 400px;
}
You should read this web page: https://css-tricks.com/all-about-floats/
The most important part is this:
The Great Collapse
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.
You can usually fix this by adding a "clearing" div at the end of your container, like this:
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
<div style="clear: both;"></div>
</div>
When you float an element, it loses all height. Therefore, the container does not know to expand to contain it. You must give the container a height large enough to contain the floated element.
Alternately, you can include a clearing div just below your floated element. This is the "so-called" clearfix, and will force the container to contain the floated element as expected.
To add a clearing div, you can add the following to your markup:
<div class="thumb"></div>
<div class="clearfix"> </div> <!-- Add this line -->
</div>
and in your CSS:
.clearfix {
clear: both;
font-size: 1px;
}
float: right; will move the element to the right of the non-floating elements after it (I am talking about HTML markup). See if this works:
<div id="menu">
<div class="thumb"></div>
<div class="categories"></div>
<img class="logo" src="#" />
</div>
Use floats for all your main divs, and have overflow: hidden for your #container