I have a webproject using bootstrap.
There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image.
The first problem was to get the columns the same height.
I found the following working solution:
.col {
margin-bottom: -99999px;
padding-bottom: 99999px;
height:100%;
}
To get the text centered vertically I inserted the following html in the right row:
<div class="table">
<div class="cell">My text</div>
</div>
CSS:
.table {
height:100%;
width:100%;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
height:100%;
}
But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;
Anybody has an idea what I can do? Thanks
I think that if you can do it, try to use flex-box instead of a fixed grid.
Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG
HTML:
<div class="row">
<div class="column">
<p> Here you have some content.</p>
</div>
<div class="column">
<p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
</div>
</div>
And CSS:
.row{
display:flex;
}
.column{
display:flex;
width:50%;
align-items:center;
}
(And to learn how to properly use the flex property: http://flexboxfroggy.com/)
Related
i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
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?
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
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