I have 3 divs in a wrapper.
one of this divs contains my content class="cont" this div has a dynamic height. The other divs navi-left and und navi right should have a hight like div cont. i have tried this but it dont work. can you help me please?
<div style="width:400px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
If you are looking for a fluid 3 colum layout of equal height, then check this 'holy grail' post.
In order for a percentage height to trigger, the height of the parent should be known. Also, your DIVs should be displayed inline if you want them to all show on the same row.
<div style="width:400px;height:80px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
CSS
div {display:inline-block;}
Fiddle: http://jsfiddle.net/qvepX/
Related
I do not find a way to center content vertically in Twitter Bootstrap Grid system. http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
For example
<div class="row">
<div class="span4" style="height:50px;min-height: 50px;">My centered object vertically</div>
</div>
The object in span4 div will always be at the top of div. I have tried to put vertical-align: middle; on parent and child Div's but that do not help.
Use line-height or padding for it...
Like this for line-height,
.line-height { line-height:30px; }
<div class="row">
<div class="span4 line-height">My centered object vertically</div>
</div>
Like this for padding, for 50px height minus it with the padding means paddingtop+height+paddingbottom = 50px,
.padding { height:30px; padding:10px 0; }
<div class="row">
<div class="span4 padding">My centered object vertically</div>
</div>
How do I vertically and horizontally align a div without knowing its width and height?
example:
<body style="padding:0px; margin:0px;">
<div id="FancyOverlay" style=" position:fixed; width:100%; height:100%; background-color:green;">
<div id="Grandparents" style="position:absolute; left:50%; z-index:1;">
<div id="Parent" style="position: relative; left:-50%; padding:10px; border:1px solid black;">
<img id="fancyImage" src="https://appharbor.com/assets/images/stackoverflow-logo.png"></img>
</div>
</div>
</div>
</body>
Test this code so you can see what I'm trying to do. #Parent needs to be in the center of the screen. I've already aligned it horizontally but I can't get it vertically to work.
btw:
I dont know the width and the height of the image, this was just an example.
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width
basically my html code looks like:
<div id="leftbar"></div>
<div id="content"></div>
<div id="rightbar"></div>
how do i code it with css so that the all 3 divs will be side by side and leftbar and rightbar have a fixed width while content will be flexible to fill out the webbrowser.
Try this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
How about this one: http://www.glish.com/css/7.asp
Float the leftbar left, and give content a margin-left value equal to (or greater than) the width of the leftbar. Float the rightbar right, and give content a margin-right value equal to (or greater than) the width of rightbar.
.nav1 { width:200px; float:left; }
.nav2 { width:200px; float:right; }
.content { margin:0 210px; }
.clear { clear:both; }
--
<div id="wrapper">
<div class="nav1">Main Nav Items</div>
<div class="nav2">Other Nav Items</div>
<div class="content">Content goes here</div>
<div class="clear"></div>
</div>
Now css has flexbox model.
You should read the specification to get the flexible layout of webpage
http://www.w3.org/TR/css3-flexbox/