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
Related
On the site I'm currently coding I have a centered DIV containing a float left column and a smaller float right column. This works fine.
In the Left floating column, I have a further float left column, containing an bio image, and a float right text column containing the bio text.
However, I am at the point of throwing my computer out of the window because the last two bio divs are sitting on top of each other, with the text underneath the photo instead of floating next to it.
I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.
The page in question is here: http://test.phantomlimb.net/about.php and the CSS is here: http://test.phantomlimb.net/phantom.css
I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and *gasp!* accomplish the same effect using tables in around 3 minutes!!!
PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.
Did you try this?
Add float: left; to your .bioleft class in phantom.css
Alternatively add float: right; to your .bioright class
You are missing colons in your css file. e.g. you have
.bioleft {
float left; /* HERE */
width: 25%;
background: red;
display: block;
}
.bioright {
float right; /* AND HERE */
width: 70%;
background: cyan;
display: block;
}
You should have float: left; and float: right;
IT is because of improper syntax you have float left; it should be float: left;
Have you considered using floated divs for the container left and right divs, then just use inline blocks for the divs inside the floated divs?
<div id="left">
<div id="img"></div>
<div id="content"></div>
</div>
And
#left {
float: left;
}
#img,#content {
display:inline-block;
}
#img {
width: 100px;
}
#content {
width: calc(100% - 100px);
}
That should put the image and the content side by side, but they will be treated as a block div.
You could actually put both the image and content divs inside their own container div and name that biog as the id, to create its own 'block'
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.
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 am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/