Also, I would like to center verticaly and horizontally things inside div. I tried, but nothing worked for me. I tried, adding absolute position. Then I can set width and height normally, but then I have problems width text(s) inside div: I cant center it vertically
Here is simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}
.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px;
height:100px;
position:relative;
}
</style>
<div class="Table">
<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>
<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>
I think one solution is: Display inner div again as table, then set paragraph as table-cell. After that, I can easy center things using align-text or vertically-align. Also I can easily set width and height of this div.
You're question really isn't very clear. You cannot set the width of a table-row (it spans the entire width of the table) but you can set the width of a cell.
Here's an example CSS table with content centred in each cell.
HTML:
<div class="table">
<div>
<div class="cell1">Cell1</div>
<div>Cell2</div>
<div>Cell3</div>
</div>
<div>
<div>Cell4</div>
<div>Cell5</div>
<div>Cell6</div>
</div>
</div>
CSS:
.table {
/* a table */
display:table;
height:400px;
width:300px;
border-collapse:collapse;
}
.table > div {
/* rows */
background-color:blue;
display:table-row;
}
.table > div > div {
/* cells */
background-color:pink;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.table .cell1 {
/* a specific cell */
width:20px;
background-color:lime;
}
http://jsfiddle.net/TU9rj/
Related
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively.
Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below.
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
Is it possible to solve it using only CSS, or need to use JavaScript?
You can do using 'display:table-cell' .
http://jsfiddle.net/sWHKs/
I have two child divs in a parent div. first child div A has an absolute height and second div B should take the rest of the height available. How to do this? Basically for div, I want height like (100% - 37px)
<style>
#C{
height:100%;
width:500px;
}
#A{
height:37px;
width:100%;
}
#B{
height: ????;
width:100%
}
</style>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
#alter, for rest on the height you need to give padding to the div B according to the height of div A
#B{
padding-top:37px;
}
for example
I think the best way to achieve that is to give the parent div a min-height and then give div B a min-height of (min-height - 37)px. See code below
#C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}
Sample Code:
<html>
<head>
<style type="text/css">
#C{min-height:600px; width:500px; background-color:yellow;}
#A{height:37px; width:100%; background-color:blue;}
#B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
I have added color to the divs just to differentiate them
I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)