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/
Related
I'm looking to create a website (or at the very least a homepage) like Joules.com
I essentially want to create boxes side by side in varying sizes but want them to resize or move to a new line with the browser window resizing (responsive?). It's also necessary for them to be centered. I can get to the point where I have the divs side by side but they don't seem to be centered... Here's what I have so far. Any help would be greatly appreciated. I'm kind of nooby in this department but wanting to learn!
CSS
#container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#Womens {
height: auto
width: 241px;
float: left;
margin: 0 auto;
text-align:center;
}
#Mens {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Footwear {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
#Accessories {
height: auto
margin: 0 auto;
width: 241px;
float: left;
text-align:center;
}
HTML
<body><center>
<div id="container">
<div id="Womens">Womens</div>
<div id="Mens">Mens</div>
<div id="Footwear">Footwear</div>
<div id="Accessories">Accessories</div>
</div>
First at all you don't need to use an ID for each element, since your CSS code is the same for everyone use a classname instead:
<div id="container">
<div class="column">Womens</div>
<div class="column">Mens</div>
<div class="column">Footwear</div>
<div class="column">Accessories</div>
</div>
Then don't use float because you can't center those elements, use inline-block:
#container {
font-size:0;
text-align:Center;
}
.column {
font-size:14px;
display:inline-block;
}
Check this Demo Fiddle
Your CSS could be much simpler by using a class (Don't Repeat Yourself ;) ).
If you put text-align: center; on the container instead the container itself and its child contents will be centered. If you want you could then override the setting for the separate columns, or just for their content.
You've also used fixed pixel values for the column width, so they can't really be "responsive." You can use percentage values there as well, but that can have some screwy side effects. Note that 4 columns even with auto margins still need to be < 100% or else they wrap oddly. They also might collapse or overlap at smaller sizes. You can set a min-width on the container or the columns to help prevent this, along with a margin-bottom to keep them separate if they do wrap.
Also, if you just use percentage width and inline-block, the columns will be aligned at the bottom. Using vertical-align: top; fixes that. You said initially you wanted different heights, but if you didn't you could set a min- or max-height & put something like overflow:scroll on the content.
#container {
width: 100%;
min-width: 320px;
margin: 0 auto;
overflow: hidden;
text-align:center;
}
.box {
margin: 0 auto;
margin-bottom: 10px;
width: 20%;
min-width: 90px;
padding: 1%;
vertical-align: top;
display: inline-block;
background-color: #678;
color: #fff;
}
.content {
background-color: #fff;
color: #333;
padding: 1em;
text-align: left;
}
<body>
<div id="container">
<div id="Womens" class="box">Womens
<div class="content">This is some left-aligned women's content about/for women. View the Code Snippet in fullscreen!</div>
</div>
<div id="Mens" class="box">Mens
<div class="content">This is some left-aligned men's content about/for men. If you resize the browser the columns will be responsive, but break after a certain point.</div>
</div>
<div id="Footwear" class="box">Footwear
<div class="content">This is some left-aligned footwear content about/for feet. Feet are weird.</div>
</div>
<div id="Accessories" class="box">Accessories
<div class="content">This is some left-aligned accessory content about stuff you men or women could potentially put on their feet, or whatever.</div>
</div>
</div>
</body>
I have two divs: floated left and floated right. The margin on the right div is breaking the left div, making it appear lower on the page than it should be. I want both divs to touching the top.
HTML:
<div class="right_div">
This div is in the right place.
</div>
<div class="clear"> </div>
<div class="left_div">
This div should be at the top</div>
CSS:
.right_div {
float: right;
margin-right:20px;
margin-top: 20px;
font-weight: 600;
background-color:blue;
}
.left_div{
margin-left: 20px;
margin: 0 0 0 20px;
padding: 0;
background-color: tomato;
text-align: left;
max-width: 10em;
}
.clear {
clear:both;
}
Here is the JSFIDDLE: http://jsfiddle.net/eLSc8/
remove
<div class="clear"> </div>
try this
<div class="right_div">
This div is in the right place.
</div>
<div class="left_div">
remove the
<div class="clear"> </div>
and the red element will stay on top.
As a sidenote, empty markup placed for styling purpose only should be avoided. If you need to apply a float clearing somewhere you should use non-structural approach like easyclearing and modern variants (e.g. see the .clearfix class of html5 boilerplate)
try this
http://jsfiddle.net/eLSc8/1/
please remove this clearboth
<div class="clear"> </div>
As everyone is saying; you can lose the clearing div.
Then simply add a float left to your other div to align it.
Depending on your structure and how you want it positioned, you might need to contain them or add margin. check jsfiddle.net/RSy6F/2/
Is this the desired effect:
http://jsfiddle.net/eLSc8/4/ ?
HTML:
<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>
CSS:
.right_div {
font-weight: 600;
background-color:blue;
position: absolute;
top: 20px;
right: 20px;
height: 2.2em;
}
.left_div {
position:absolute;
top: 20px;
left: 20px;
background-color: tomato;
height: 2.2em;
}
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>
My divs are displaying a staircase effect, as shown below. Usually in tables you can use vertical-align: top, not sure how to do this for divs.
____1_____
_____2_____
______3_____
The CSS I have so far is:
.areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto;
width:130px;
padding:5px;
}
The HTML is:
<div>
<div class="areadiv">
content
</div>
</div>
I'm with #bartolsthoorn that your CSS is quite confusing. But rather than using float I'd use only display: inline-block. And when you use inline-block you have to remember to set vertical-align as well as most (all?) browsers default to middle:
.areadiv {
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
That's all you need.
Ok firstly the width of the containing div must be set = or > than the combined widths of the floats, that's how it knows to move on to the next line.
For example..
.areadiv
{
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
.containerdiv
{
width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}
And the HTML:
<div class="containerdiv">
<div class="areadiv">
</div>
<div class="areadiv">
</div>
<div class="areadiv">
</div>
</div>
Your CSS doesn't make so much sense with the layout you're are trying to achieve, it should be:
.areadiv {
float: left;
display: block;
width: 130px;
padding: 5px;
}
The margin: 0 auto; is used for centering container divs and you don't need the inline-block.
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;
}