I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo
Related
I have two div inside a container div: JS Fiddle Link
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
<h3>Right</h3>
</div>
</div>
But I am not sure why they do not align both to top or anywhere with same alignment with this CSS:
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
You have Right inside a <h3> tag, which is adding margin to the tag (which in turn pushes the Right heading down slightly)
Either set both Left and Right to be inside header tags, or remove the one for Right, and they will display the same.
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
And your CSS can be left as it is
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}
Set float left in the first div to force the align and remove the hr or add the hr to both
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999; float:left;}
div#container div.rightContainer{background:#555}
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
Just add css:
div#container { float:left;}
div#container div{
float: left;/*remove inline block and add float left to align your div*/
width:200px;
height:50px;
}
SEE DEMO:http://jsfiddle.net/JentiDabhi/x21nv0gm/
if you're able to use external frameworks I'd suggest you using Twitter Bootstrap and use its grid system to align stuff simply by doing somenthing like:
<div class="container">
<div class="row">
<div class="specify column sizes">
Left
</div>
<div class="specify column sizes">
<h3>Right</h3>
</div>
</div>
</div>
Using Bootstrap and specifying your choosen column sizes (col-sm-N, col-md-N, col-xs-N, col-lg-N) instead of using a fixed 200px width allows you to make your page change it's behaviour on different display sizes using only CSS
To retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}
Add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
And to retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}
I have a max-width wrapper, within it are four boxes of a fixed width and height. When the browser window is reduced, the boxes fall inline and centered within the container, but the alignment is slightly out, as if there's a small left margin.
Here is a jsfiddle: http://jsfiddle.net/ve2fyrh7/
If I remove "text-align:center;" from #boxcontainer it clears up the alignment issue, but then the boxes won't be center-aligned inside the container which I require when the browser window is reduced.
If I remove ".box:last-child" then that also solves the alignment issue, but then all four boxes won't be inline when the browser window is >960px.
I appreciate any help/suggestions on where I'm going wrong.
CSS
#wrapper {
max-width:960px;
margin:0px auto 0px auto;
}
#boxcontainer {
width:100%;
background:#f8f8f8;
font-size:0;
text-align:center;
}
.box {
width:225px;
height:200px;
display:inline-block;
background:#ccc;
font-size:18px;
margin:0px 20px 20px 0px;
}
.box:last-child {
margin-right:0px;
}
HTML
<div id="wrapper">
<div id="boxcontainer">
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
</div>
</div>
Add float:left to your box class.
If you want to solve this on a specific media device use media query.
The margin-right:0px; on the the last div is causing the spacing issue. If i remove that, it seems to be fine. http://jsfiddle.net/ve2fyrh7/2/.
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
I am trying to allow the height of the div to dynamically change according to the number of elements inside the div. The whole idea of what i am trying to do is shown in the diagram below
The last div should be able to change dynamically. It seems that i have to set the height of the third inner div. If i don't, the div appears outside the main div.
Solutions that i have tried:
1) overflow: auto
2) trying not setting the height of the 3rd inner div.
Must i use javascript? can i don't use javascript? These solutions didn't work. Need some guidance.. Sorry if the question was repeated....
Hey now i think you should this
HTML
<div class="parent">
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child2">
dynamic height
</div>
</div>
Css
.parent{
border:solid 1px red;
}
.child1, .child2{
overflow:hidden;
margin:10px;
border:solid 2px green;
}
.one{
background:red;
border:solid 1px black;
padding:10px;
float:left;
margin:10px;
}
Live demo http://tinkerbin.com/i1R8emEb
Now change to height width or height according to your design ..
Don't give the div a fixed height, just use float:left; in your CSS.
jsFiddle
I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
CSS
.box {
width:200px;
height:200px;
padding:10px;
display:inline-block;
border:1px solid black;
text-align:center;
}
RESULT
Add vertical-align:bottom to the style of your divs.
The cause of your problem is the presence of any content, as it defines the baseline for the div.
Adjusting the css like this works
.box {
width:200px;
height:200px;
padding:10px;
border:1px solid black;
text-align:center;
}
div.box{display:inline;float:left;}
jsFiddle solution
Just change the display property of the div's and they'll align vertically:
display: block
Edit: #ben said he wanted the div's aligned vertically. Vote me down if you must, but it's not my fault if he didn't know the difference between horizontal and vertical.