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.
Related
Can someone help me with this? I want make this design, But I have problem with position. Here is image
Here is code
> https://plnkr.co/edit/Smyes7rZXVcqq5IugW2o?p=preview
The below skeleton will work for you best.
Set parent div's height and display to table (min-height won't work for you here). You can vertically align contents inside the parent div if you set child div's display to table-cell and vertical-align to middle. The child content will automatically align vertically even if the content height changes.
<div class="container">
<div class="col-sm-6 left">
<div class="inner">
<span>become our partner</span>
contact us
</div>
</div>
<div class="col-sm-6 right">
//right side content
</div>
</div>
.left{
height: 500px;
background: #ccc;
display: table;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner span, .inner a{
display: block;
text-transform: uppercase;
}
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 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;
}
I'm trying to center the strings "1","2" and "3" vertically as seen here:
But when I use display: table-cell; vertical-align: middle; for all 3 div's, but then I get his unwanted result:
HTML is
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
CSS is
.each_div {
width: 80px;
height: 50px;
text-align: center;
display: table-cell; vertical-align: middle;
}
Demo
How do I keep the 3 div's aligned vertically while keeping vertical alignment within each div?
This is a conceptual misunderstanding. Without a parent element with display:table-row the tables cell will always span over full width, because it will create anonymous table object of table-row and table.
According to W3C Specification article: Tables
Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. .....
Here is a quirksmode page showing uses of display: table and so on. A image showing the same effect as on this question.
To solve this problem semantically, you have to add an extra element to display as row.
<div id='alldivs'>
<div id='red' class='each_div'>
<div class="cell">1</div>
</div>
<div id='blue' class='each_div'>
<div class="cell">2</div>
</div>
<div id='green' class='each_div'>
<div class="cell">3</div>
</div>
</div>
Then assign relative CSS to them
#alldivs { display: table; }
.each_div {
display: table-row;
}
.cell {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
Demo
I think there's a much simpler way, using line-height:
<div id='alldivs'>
<div id='red' class='each_div'>1</div>
<div id='blue' class='each_div'>2</div>
<div id='green' class='each_div'>3</div>
</div>
.each_div {
width: 80px;
height: 50px;
line-height:50px; // set to the same height as the div
text-align: center;
clear:both;} // add clear both to skip line
See the jsfiddle here and compare with the other answers.
You can wrap each one in another <div> with display: table-row; and it will look as you wish:
HTML:
<div id='alldivs'>
<div class="row">
<div id='red' class='each_div'>1</div>
</div>
<div class="row">
<div id='blue' class='each_div'>2</div>
</div>
<div class="row">
<div id='green' class='each_div'>3</div>
</div>
</div>
CSS:
.each_div {
width: 80px;
height: 50px;
display: table-cell;
vertical-align: middle;
border: 1px #000 solid;
}
.row {
display: table-row;
}
This is because table-* is designed to emulate a table, thus one must follow table structure to get table appearance. In this case you may just want to use a table.
I have found a work-around that works the way you want. If you wish then you can use it:
Change your CSS as:
.each_div {
width: 100%;
height: 50px;
vertical-align: middle;
text-align:center;
background:red;
}
#alldivs{
width:80px;
display:block;
}
Note that I have mentioned width:80px for the parent div alldivs
It gives the output as:
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/