I want to center some text in a fixed height div.
I've made the following fiddle
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h1 style="vertical-align:middle;">Contact</h1>
</div>
<div style="height:180px;border:1px solid black;vertical-align:middle;">
<h2>Welcome to the</h2>
<h1>AAA</h1>
<h4>system</h4>
</div>
I've tried various options of the vertical-align:middle applying it to the different elements but it doesn't seem to work.
I did see other questions where the line-height was set to the same height as the font-size but in the second example I have multiple lines of text at different heights.
Is there a good way to do this?
Used to display table-cell
as like this
.parent{
height:180px;border:1px solid black;vertical-align:middle;
display:table-cell;
}
Demo
Don't use to inline css write a class in external css and define css
Vertical alignment always comes with some trouble. You should apply that css property only to table (td) elements and inline elements, not block elements like divs.
To position something in the middle you can use very simple solution - by using absolute positioning.
Create child block and set it's position to absolute, move it 50% from top, and set margin-top to negative value with amout equal to half of parent's height. Set your parents position to relative.
#parent {
position: relative;
height: 180px;
}
#child {
position: absolute;
top: 50%;
margin-top: -90px;
}
<div id="parent">
<div id="child">
<h1>sample</h1>
<h2>sample</h2>
</div>
</div>
Related
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.
I am trying this:
there is a picture element Which is wrapped inside a container div
<div id="container">
<div id="a">
<img src="b.jpg" alt="b" />
</div>
</div>
Now I want to place the child elements such a way that the top and left of the picture is always 25% of the height & width of the container div. How can I achieve this?
If that is the only requirement, you can just do it by adding a padding on the inner div.
According to W3C, it those percentages should refer to the dimensions of the outer div.
Like margin properties, percentage values for padding properties refer
to the width of the generated box's containing block
http://www.w3.org/TR/CSS2/box.html
For the height, it will only work if your inner div is the only element inside your outer div (because the inner div will determine the height of the other). So for you example, it'll work.
Try this:
#container {position: relative;}
#container #a {position: absolute; left: 25%; top: 25%;}
Here's a working fiddle: jsFiddle
Try:
#container { position:relative; }
#container img { position:absolute; top:25%; left:25%; }
Live demo: jsFiddle
I have two divs. These two divs are orientated as two vertical columns next to each other. Instead of pre-determining the height of the divs via css I want to have it grow dynamically with the content I put into it. Which is simple enough for one div but my problem is that I want the div on the left with background color green to grow to the same height of the div on the right . There is always going to be more content in the right than in left.
Assuming the elements are after body. Give 100% to the body, and all the div
body, #div1, #div2 { height: 100%; }
If they are not, then you have to either fix the height of the parent or chain 100% height all the way to the body again.
#parent { height: 800px; }
#div1,#div2 { height: 100%; }
Enclose those divs in a parent div, and set their height to 100%.
You simply need a three-column (X)HTML + CSS Layout.
It's here
Let insert a parent div (container of those two adjacent divs)
add a property 'display: flex;' to the parent div
.parent{
display: flex;
}
.child1, .child2{
padding: 10px;
border: 1px solid gray;
}
<body>
<div class="parent">
<div class="child1">
CHILD 1 AREA<br />
CHILD 1 AREA
</div>
<div class="child2">
CHILD 2 AREA
</div>
</div>
</body>
Related (possibly duplicate) questions:
How do I achieve equal height divs with HTML / CSS ?
Make Two Floated CSS Elements the Same Height
Hello, every one,
I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it
<div class="two_cols_container">
<div class="two_cols">
<div class="left-col">
test
</div>
<div class="right-col">
test
</div>
</div>
</div>
my css code is
.two_cols_container {
width: 100%;
height: 100%;
}
.two_cols {
position: relative;
margin: 0 auto;
border: 1px solid black;
height: 100%;
height: auto !important;
min-height: 100%;
}
.two_cols .left-col {
/*position: absolute;
left: 0;*/
float: left;
}
.two_cols .right-col {
/*position: absolute;
right: 0;*/
float: right;
}
any idea?
A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.
B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.
EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.
There's
Tables ( you probably wouldn't want to rely on this )
Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )
Border Trick ( a little complex but this only works for solid colors )
Padding / Margin / Clipping ( another complex one I wouldn't recommend )
I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,
div#wrapper { background:url(/images/faux.gif) repeat-y; }
If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.
By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:
html, body { height:100%; }
I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.
If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.
You can use div style property to create as many columns you need, with what ever CSS effect you need :
<div style=”width: 100%;”>
<div id=”left” style=”float: left;">
<--! your text here -->
</div>
<div id=”right” style=”float: right;">
<--! your text here -->
</div>
</div>
Source and example : WordPress Tutorial Series - Basics about HTML and CSS