How can I stretch the side divs to fill the page?
http://jsfiddle.net/p94vxnp2/1/
<style>
#page_body_table {
display: table;
width: 100%;
vertical-align: center;
}
#page_body_left {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
#page_body_middle {
display: table-cell;
max-width: 1024px;
border: 1px solid black;
}
#page_body_right {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
#media screen and (max-width: 675px) {
#page_body_left, #page_body_right {
display: none;
}
}
</style>
<center>
<div id="page_body_left">
left
</div>
<div id="page_body_middle">
this is content of page
</div>
<div id="page_body_right">
right
</div>
</center>
To make display:table-cell work, you have to put display:table to its parent.
In your case, add display:table to #page_body
Get rid of all the max-width. Set the middle div as width:1024px and leave the sided divs without anywidth. They will fit automatically, as long as the wrapper div is width: 100%;
http://jsfiddle.net/p94vxnp2/5/
If you want to center div you have to do sth like this:
.center-div {
Margin: 0 auto 0 auto;
Width: 500px; for example
}
You dont have to give divs on sides.
Related
I am wanting to put a child image, with its size adjusted, inside a parent div. How do I get this parent div's with to be the same, and not bigger, than the child image? See the below snipppet for an example. Thanks.
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
width: 80%;
height: 80%;
overflow: auto;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
In that case, you need to have the width of the img to be 100% and have the width or something of 80%:
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
display: block;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
Preview
The fact that you are using a percentage for the img size is the problem. You are saying that your image has to be 80% of the parent div therefore you are explicitly telling the img not to fill the whole div.
The other problem you have is that an image is an inline element, if you change that to block it will remove the extra space at the bottom of the image.
See the CSS
div {
border: 1px solid blue;
display: inline-block;
}
img {
background-color: orange;
display: block;
width: 90px;
height: 90px;
}
Also a Pen
I hope it helps!
I'd like a DIV inside table cell fit all available space wide.
There are two DIVs in green cell: first one has margin-left: 40px and second Pencil have width 100%. I want latter DIV to take free space like this:
I think that problem is that 100% of width for Pencil's block is actually it's parent width, i.e. green cell. As there's also left yellow box with some width and margin, content of the cell is overflowed and splitted into two "rows". Unfortunately,
I can't find a way to acheive desired layout with CSS only without JavaScript. Is it possible at all?
Let me share a live example to play with: JS Bin. Thank you in advance!
If you set the div.title like this it will work
width: calc(100% - 50px); // This one
Adjust the "50px" to be more accurate to the space the div.handler occupy.
Update based on comment about supporting IE8
By changing to this in your JSBin, it works
.left {
.border(green);
width: #width-left;
overflow: hidden;
& > * {
}
.handler {
.border(magenta);
background-color: yellow;
width: 20px;
float: left;
}
.title {
.border(red);
overflow: hidden;
}
}
Sample snippet
.table {
border: 1px dotted grey;
display: table;
width: 80%;
box-sizing: border-box;
}
.table .row {
display: table-row;
}
.table .row > * {
display: table-cell;
}
.table .row .left {
border: 1px dotted green;
width: 40%;
overflow: hidden;
}
.table .row .left .handler {
border: 1px dotted magenta;
background-color: yellow;
width: 20px;
float: left;
}
.table .row .left .title {
border: 1px dotted red;
overflow: hidden;
}
.table .row .right {
border: 1px dotted blue;
width: 60%;
}
.table .row .right > * {
display: inline-block;
}
.table .offset {
margin-left: 40px;
}
<div class="table">
<div class="row">
<div class="left">
<div class="handler offset">[+]</div>
<div class="title">Pencil</div>
</div>
<div class="right">
<div class="price">$0.60</div>
<div class="quantity">14 PCS</div>
<div class="total">$8.40</div>
</div>
</div>
</div>
.table .row .left .handler,
.table .row .left .title {
display: table-cell;
}
This answer really depends on how you want text overflow to be handled - but if you just change .title to have display:inline (rather than inline-block) then it seems to render as you want. However, this might not be the desired result when you have text in the cell much longer than the word "Pencil".
I have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.
Here is the code I have tried...
Fiddle
<div id="wrapper1">
<div id="one">1</div>
<div id="two">2</div>
</div>
CSS from here...
#wrapper1 {
width: 100%;
height: 90px;
margin: 0 auto;
}
#wrapper1 #one {
width: 200px;
height: 90px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
width: 100px;
height: 90px;
margin-left: 10px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#media screen and (max-width: 400px) {
#wrapper1 #two {
display: none;
}
}
Demo
text-align:center into your parent div will make all the child div's will come in the center.
css
#wrapper1 {
width: 100%;
height: 90px;
text-align: center; /* add just this to make child elements center in parent div */
}
just add the mentioned below css :-
#wrapper1 {
display: table;
height: 90px;
margin: 0 auto;
text-align: center;
width: 100%;
}
through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....
DEMO
I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/