I have decided that I have no idea what I am doing with my css.
I want to have two divs display side by side. The left div has content and should be big enough to support it. The right div should take up the rest of the horizontal space and be the same height as the left div.
A third div should then be beneath the two and span across the entire page.
I tried using a table, but the right hand cell wouldn't expand to the full height/width available. I've been trying to use divs with the displays set to table, table-row, table-cell.
For some reason the left div keeps expanding horizontally and my right div doesn't get any space. I have tried specifying the width of the left div, and it gets ignored.
The right div has dynamic content created by javascript, so it is empty when rendering occurs.
#main {
display : table;
width : 100%;
}
.row {
display : table-row;
width : 100%;
}
#row2 {
display : table-row;
background-color:purple;
}
#right {
display : table-cell;
overflow: hidden;
height: 100%;
background-color:blue;
}
#left {
display : table-cell;
background-color:red;
width: 100px;
}
<body>
<div id="main">
<div class="row">
<div id="left">
Some content
</div>
<div id="right"></div>
</div>
<div id="row2">
Some stuff
</div>
</div>
</body>
Js Fiddle
Your "right" column isn't taking up any space because it has no content. Give it something and it will.
http://jsfiddle.net/6LFsL/4/
<div id="main">
<div class="row">
<div id="left">
Some content
</div>
<div id="right"> </div>
</div>
<div id="row2">
Some stuff
</div>
</div>
Also, using the table display properties doesn't mean you need to have table, table-row, and table-cell elements. Table and table-cell are just enough for this scenario:
.row {
display : table;
width : 100%;
}
#row2 {
background-color:purple;
}
#right {
display : table-cell;
overflow: hidden;
height: 100%;
background-color:blue;
}
#left {
display : table-cell;
background-color:red;
width: 100px;
}
Related
I have three columns, but in the center one I can display only limited number of paragraphs.
If I add, for example, 15 paragraphs, only first 11 paragraphs will be displayed. It's like the div have set height parameter. Does anyone know how to fix this?
<div id="left" style="float:left; width:250px;"></div>
<div id="right" style="float:right; width:250px;"></div>
<div id="center" style="margin:0;"></div>
Add float:left; also to your #center element
or if you don't want it floated than: overflow:auto;
An alternative approach would be to use display: table; and display: table-cell; instead:
CSS
#container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: top;
}
.side {
width: 250px;
}
HTML
<div id="container">
<div class="cell side">Left</div>
<div class="cell">Center</div>
<div class="cell side">Right</div>
</div>
I'm assuming these are the building blocks for your layout, with a centered area and sidebars on the left and right. Using table has the benefit that all cells maintain the same height; float can be fickle.
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
I have the following HTML:
<div class="section-cover dark-cyan" ng-style="{height: getCoverHeight()}">
<div class="container">
<h1 class="intro">Some intro text.</h1>
</div>
<div class="arrow-holder" ng-click="scrollTo('video-container');">
<span class="arrow"></span>
</div>
</div>
The .section-cover div changes height dynamically based on viewport size whenever the browser is resized. I need to align the <h1> element vertically inside the section-cover div. So far I've achieved that using display: table-cell however now I can't get the width to stick at 100%. Here's a JSFiddle example:
http://jsfiddle.net/AvrrM/
How can I modify this to vertically align the <h1> and keep the width at 100%?
Maybe something like this?
http://jsfiddle.net/AvrrM/1/
.section-cover {
position: relative;
display: table;
vertical-align: middle;
width: 100%;
}
.container{
display: table-cell;
background: red;
text-align: center;
vertical-align: middle;
}
Why is itsn't working?? because table-cell is similar to html table, you need to provide a container which is table type before you can make the table-cell occupy the full width!!
working fiddle
add this CSS in your markup :
html, body {
width: 100%;
height:100%;
margin:0;
padding:0;
}
#table {
width: 100%;
display:table;
text-align:center;
}
HTML
<div id="table">
<div class="section-cover dark-cyan" style="background: blue; color: white; height: 200px">
<!-- all inner html here -->
</div>
</div>
I want to create two divs beside each other, however I want the one on the left side to be 300px, and the right one to take up the remaining amount on the screen. How would that be possible? Thanks!
The most straight-forward (and I would say correct) way is to use display: table:
#wrapper {
display: table;
width: 100%;
}
#left, #right {
display: table-cell;
color: white;
}
#left {
background: blue;
width: 300px;
}
#right {
background: red;
}
<section id="wrapper">
<aside id="left">Left 300px</aside>
<div id="right">Right the rest</div>
</section>
http://jsfiddle.net/YbLZE/1/
Try resizing the bottom right frame.
Updated with HTML5 elements section and aside, which you should use if you have an HTML5 doctype. I have to remember to use those...
This is the working example:
http://jsfiddle.net/tnm62/
Explenation:
1. Place both elements in one container.
2. Position your left element absolute, set its width to 300px.
3. Set left margin to your right element to 300px.
One solution is to float: left; the left div that's 300px wide, and then apply overflow: hidden; to your right div. Here's the basic outline:
HTML:
<div class = "left">
Glee is awesome!
</div>
<div class = "right">
Glee is awesome!
</div>
CSS:
.left {
width: 300px;
float: left;
}
.right {
overflow: hidden;
}
And a little demo: little link.
Here's something for newer browsers (not IE):
CSS:
#container {
display: box;
}
#left {
width: 400px;
}
#right {
box-flex: 1;
}
HTML:
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
Demo: http://jsfiddle.net/N5zhH/1/
This should be sufficient:
<div style="overflow: hidden;">
<div style="width: 300px; float: left;"></div>
<div style="margin-left: 300px;"></div>
</div>
overflow: hidden will stretch the container div to accommodate the tallest child element
float: left floats the element left (doh!)
width: 300px and margin-left: 300px together assures that if the right column is taller than left it will not flow below the left floated div; it will maintain a 300x gap from the left edge of container div
Tip: change to margin-left: 320px to add a 20px gutter
Here is a nice little DEMO
I want my content area to stretch to the height of the parent, and I have a fixed height for the title area. I cannot hard-code the height of the content area because in the case I'm working on, the height of the parent area may change.
HTML:
<div class="parent">
<div class="title">Title</div>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
}
.title{
height:50px;
background-color: #94A6E0;
margin:5px;
}
.content{
background-color: #8CBF99;
margin:5px;
}
JSFiddle: http://jsfiddle.net/PGJJv/
There is a way to do it without using fixed heights:
You can set the parent to display: table; and the children to display: table-row. Then the lowest div will take the rest of the height. The only thing is that you need an extra element in between to fake the space between the two elements as border-top or border-bottom don't work on <tr>s. Also you must add padding to the parent in place of margin on the children.
(This is not a real <tr>, it is a sematic div but it is just emulating the behavior of a <tr>.)
HTML:
<div class="parent">
<div class="title">Title</div>
<span class="greyLine"></span>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
display: table;
padding: 5px;
}
.title{
height:50px;
background-color: #94A6E0;
display: table-row;
}
span.greyLine
{
display: table-row;
background-color: gray;
height: 5px;
}
.content{
background-color: #8CBF99;
display: table-row;
}
http://jsfiddle.net/Kyle_/PGJJv/6/
EDIT:
As Dipaks rightly points out, IE7 doesn't support the display: table-row; property.
Maybe you can use the property of a table. Set your parent as a table
You can have a fixed height for your title, that you display as a table-row.
And your content is the second and last table-row; so it always fit the height of the table.
Here is a fidde example : http://jsfiddle.net/PGJJv/5/
You just have to play with margin and border to recreate exactly your template.