I want to set the width of divs to their contents and keep the divs under each other. Using display:inline-block effectively floats the divs next to each other. How can I do this?
Working jsFiddle Demo
Consider the following markup:
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
Float and clear all, here is the CSS:
.text {
background: yellow;
float: left;
margin-bottom: 3px;
clear: both;
}
Put clear: both on them this will keep them from floating, and yes you do need float "something"
#div1, #div2{
display: inline;
float: left;
clear: both;
border: 1px solid grey;
}
<div id="div1">some content here that is bigger</div>
<div id="div2">some content here</div>
Related
I have 3 identically sized inline divs with solid borders so they appear as rectangles. I gave them classes of left, center, and right.
When I have the left class as vertical-align: top and the right class as vertical-align: middle, they appear like so:
If I add vertical-align: bottom to the center class, it doesn't affect the center block at all. Rather, it moves the right class up as if I had made no vertical-align style rules at all. What CSS rules are causing this?
JSfiddle Before
JSfiddle After
Well, it is an interesting issue. I think the secret is by understanding that vertical-align: middle is different from the others, since it is affected by the lowercases letters of the parent element. I wrapped the divs in a wrapper in order to show it:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
}
.right{
vertical-align: middle;
}
<div class="wrapper">
sddsfsdfdsfdsfdsfdsfdsfdsfdsaa
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
So it's easy to see that the right div, with vertical align: middle is relative to the position of the lowercase letters.
As for the second example:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
vertical-align: bottom;
}
.right{
vertical-align: middle;
}
<div class="wrapper">
test test test test test
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
Here everything works by the rules as well- the items are aligned according to the baseline, and the middle to the letters of the parent container.
You can find more details about this behaviour over here
I'm doing a layout for an online shop. I wanna have a two-column layout, with the two div at the same height, but not for all the divs, but only the two on the same row.
the problem is, that the pictures do not all have the same height, so sometimes the left div is higher which makes the next div come on the right side (float: left).
Is there any way to solved it without the same height for all divs?
HTML:
<div id="inhalt">
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
CSS:
#inhalt
{
width: 600px;
float: right;
margin-top: 1px;
margin-left: 1px;
margin-bottom:20px;
padding: 10px 10px 20px;
background-image: url(http://www.kostuemkaiser.ch/images/bg_3.png);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
} `
.listebild {
width: 68px;
float: left;
text-align:left;
margin-bottom:25px;
}
.listext {width: 300px;
float: left;
text-align:left;
margin-bottom:25px;
min-height:170px;
}
.listepreis {
float: left;
text-align:left;
padding-top: 20px;
margin-right:15px;
font-size:12px;
}
.listemenge {
float: left;
font-size:12px;
text-align:left;
padding-top: 17px;
}
Is there a way to make the height smaller if the pictures of both divs on the same row is small? I do need this "single div" style, because the data will be filled in automaticaly.
This is how it looks with min-height 170px: the problem if I take it away, sometimes the left div squeezes in at the right side...
Thanx for ideas
Use inline-block instead of floating and your problem should go away. Change your .listext class to the following:
.listext {
width: 298px;
display: inline-block;
text-align:left;
margin-bottom:25px;
}
Note that we had to take a few pixels off the width in order for inline-block to work. I've also removed the min-height as it is no longer necessary.
For more information on inline-block, I'd suggest reading this article.
I gather that you want the left and right bit to be aligned, however i couldn't get that from your question and layout so instead i've made you a POC which shows you how using
display: table;
and
display: table-cell;
can solve your issue: http://jsfiddle.net/B2k2a/1/
I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?
Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>
JSFiddle
You can add css float:left to div and If you also don't want any text in div you should add css height to div.
.horizon div{
float: left;
height: 20px;
}
like this http://jsfiddle.net/KG5B3/
Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle
.horizon div{
float: left;
}
Fiddle
You can float those inner DIVs. You can also use inline-block (not shown).
<div class="horizon">
<div class="left">left</div>
<div class="mid">middle</div>
<div class="right">right</div>
<br style="clear: both" />
</div>
body {
margin: 0;
}
.horizon {
background: #000000;
width: 100%;
}
div.horizon div {
float: left;
}
.right {
width: 25%;
background: #ff0000;
}
.mid {
width: 50%;
background: #00ff00;
}
.left {
width: 25%;
background: #0000ff;
}
I am having a problem with what i think is my style sheet. My site page seems to be set up fine:
However, when i view it in a browser the middle document is out of line:
Could there be anything causing this to happen? it leads me to think maybe something in my css file is? But what? :(
My css file is as follows:
div.left
{
float: left;
width: 15%;
background-color: white;
}
div.right
{
float: right;
width: 40%;
background-color: white;
}
div.center
{
float: left;
width: auto;
background-color: white;
text-align:center;
}
That's most probably due to your floating elements and since the center div is not floated at all, but rather "pushed" to the middle by the float:left of the left div.
If your div's in the html are like:
<div class="parent_div">
<div class="left"> left </div>
<div class="center"> center</div>
<div class="right"> right</div>
</div>
Try floating the center div to the left also, and it should do the trick
div.center
{
float: left;
width: auto;
background-color: white;
}
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}