This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
I have a float: left siderbar <div> that has min-height set to 500px.
The content area <div> to the left of it also has min-height of 500px.
What I can't seem to figure out is this: if the height of the content <div> goes over 500px due to longer page content, how do I get the sidebar <div> to grow downward pixel-for-pixel, matching the height of the content <div>, so that it is still touching the footer <div> that is below both of those (it uses clear: both)?
I could use a table to do this, but I'd really rather find the CSS to do it more... "properly."
The current CSS for the content, sidebar, and footer <div>'s:
#ContentHolder
{
float:left;
padding-left: 10px;
width: 590px;
min-height: 500px;
}
#SideBar
{
float: left;
width: 200px;
min-height: 500px;
background-color: #4a4a4a;
border-top: 2px solid #404040;
border-top-left-radius: 7px;
background-image: url('Images/SideBar.gif');
background-repeat: repeat-x;
background-position: bottom;
}
#Footer
{
clear: both;
background: #404040;
font-size: 10px;
height: 30px;
text-align: center;
line-height: 30px;
color: #707070;
text-shadow: 0 1px 0 #202020;
}
I think you are searching for FlexBox
Here we go: CSS - Equal Height Columns?
I hope I helped ya,
good luck.
You just need some simple CSS, have two columns, set their width,float one side or the other, and then having a div tag to clear these columns will make sure anything that appears after that, gets rendered below.
.clr {
clear: both;
}
.column1 {
width: 500px;
}
.column2 {
float: right;
width: 300px;
}
<div class="column1">
no matter how big this, does nto matter
</div>
<div class="column2">
this does not matter
</div>
<div class="clr"></div>
<div class="footer">
This is my footer
</div>
Related
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I am trying to have a header that is split three ways (a logo to the left, something in the middle, and something else to the right). The width of the header is 100%.
The issue I am having is that the right part only appears lower (under the info in the middle div). Not sure how to simply display the right part to the right in that case. I might not be explaining this very well, let me know if I can clear this up further.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
</div>
<div id="header-right">
</div>
</div>
with the css:
#header {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #fafafa;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: auto;
}
#logo {
font-size: 24pt;
color: #08a3d9;
width: 100px;
float: left;
}
#header-middle {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#header-right {
float: right;
width: 300px;
margin-right: 20px;
text-align: center;
}
Your CSS is fine. Just move #header-middle last in your HTML. Then what is float: right will go right, float: left will go left, and the middle content will fill upwards and occupy the unclaimed middle space. What is happening the way you have it, is the unfloated element is pushing the floated element after it.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-right">
</div>
<div id="header-middle">
</div>
</div>
If changing the HTML order is not an option, then just assign widths to everything, and float all the items left.
Here's another solution for your consideration:
In the code below, I've removed all floats and used relative sizing to allow your design to better handle narrow ...
... and wide ...
... screen widths more responsively.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#header {
padding: 25px 10px;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: no-content;
min-width: 400px;
}
div#header div {
display: inline-block;
padding: 1% 0;
margin: 0 2%;
text-align: center;
border: 4px dashed; /* Useful for positioning */
font-size: 2em;
}
#logo {
color: #08a3d9;
width: 20%;
border-color: red;
}
#header-middle {
width: 40%;
border-color: green;
}
#header-right {
width: 20%;
border-color: blue;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
middle
</div>
<div id="header-right">
end
</div>
</div>
</body>
</html>
I'd also recommend using something like HTML5 Boilerplate or Columnal that provide a decent responsive grid system so that your site works beautifully on both desktop & mobile.
I made another jsFiddle for you.
updated http://jsfiddle.net/zGfh7/
My answer is much more complicated than magi's, but it also works.
I added float: left to the middle header.
Also, I changed the widths of all the headers to 33%, and removed all margin-left and paddings, etc, to make things more clean. You can keep or change the 33% widths to your preference, but making sure that all the widths add up to 100% ensures that the header is nicely filled.
I've also added background-colors so you can see that things align nicely.