I'm sure I'm missing something here... so I've dumbed down my question as much as I can so it makes sense. (I'm somewhat a novice at using CSS properly).
To clarify, I made a graphic that shows what I'm trying to accomplish, but I can't seem to get it right and I've been trying all day. I need a 100% wide header div, content in the middle, and a 100% wide footer div. My footer div keeps going up behind my content area. CANT figure it out.
<div id="HEADER"></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo"></div>
<div id="top-right-date"></div>
</div>
</div>
<div id="FOOTER"></div>
I've also included a fiddle:
http://jsfiddle.net/b9kah2wx/
Thank you!!
I've made some changes to your jsfiddle http://jsfiddle.net/b9kah2wx/2/
#HEADER {
height:300;
width: 100%;
}
#CONTENT {
background-color: #C0F;
height:auto;
width: 100%;
}
#FOOTER {
background-color: #C00;
height:500px;
width: 100%;
}
#contentwrap {
width: 66%;
height: auto;
margin: 0 auto;
background-color:#0ff;
}
#top-left-photo {
float:left;
height: 180px;
width: 40%;
margin-right: 15px;
background-color: #555555;
font-family:"Dirty";
}
#top-right-date {
float:left;
height: 180px;
width: 40%;
margin-right: 0px;
background-color: #555555;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You'll notice I changed the fixed width to percentages just so I could work with it in the jsfiddle but the basic idea is there.
You also need to clear your float:ed elements so the parent div#contentwrap height problem will get fixed. I've added this code for you.
and this is your HTML
<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo">photo</div>
<div id="top-right-date"> date</div>
<div class="clearfix"></div>
</div>
</div>
<div id="FOOTER"></div>
Do this: Add the below code to your css file
* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}
Note: It's important that you clear your floats as Paulie_D mentioned
Related
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 would like to achieve a layout that looks like this:
I am interested in a css/html only solution, so no javascript required.
The widths of both divs are dynamic, so I cannot use any static margins.
The spacing between the sides of the divs, and the top, should be the same.
I tried using margin: auto auto 0 auto on the inner div, as you can see in this jsfiddle, but it only works for left and right.
Note, the following attempt doesn't answer the question fully, since the width of the child cannot be dynamic.
The idea is to use a percentage width + percentage margin-top values on the child. It's a responsive layout, see the comments in the code, and try it out on different window sizes.
JSFiddle: http://jsfiddle.net/jkoycs6e/
body {
margin: 0;
}
.outer {
height: 100vh; /*for demo only*/
background: teal;
overflow: auto;
}
.inner {
width: 80%;
background: gold;
margin: auto;
margin-top: 10%; /* 100%-80%/2 */
}
<div class="outer">
<div class="inner">
hello<br/>hello<br/>hello
</div>
</div>
This is not possible. At least not without using javascript. There is no css-only solution.
If you put align="center" in your div you'll get to the middle of the screen every time but it's not going to be supported in HTML5 so I recommend the 50:50 approach.
div
{
text-align:center;
margin-top:50%;
margin-bottom:50%;
}
Hope that helps. ^^
Set the outer parent's overflow to auto and give your margin-top a relative value. Something like this:
.outer {
background: blue;
overflow: auto;
}
.inner {
background:yellow;
width: 100px;
height: 100px;
margin: 1em auto 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
This seems to work:
.outer {
height: 500px;
width: 300px;
background: blue;
position: relative;
}
.inner {
width: 80%;
height: 200px;
background:green;
position: absolute;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 0;
}
You can change the percentages marked for the margins as per your intended value for k.
Here's the fiddle
EDIT: Note that the width of inner has to be set in terms of percentages for this to work. Also note that when a margin is specified in terms of percentage, the margin's value is computed as a percentage of the width of the container. Even for the vertical margins, the percentage is applied on the width (and NOT the height) of the container.
Here's an SO post that's helpful in understanding how to position elements with respect to their container.
This answer doesn't actually make use of the margin property, nor does it have only two div.
body {
font-size: 26px;
text-align: center;
font-family: monospace;
}
#container {
display: inline-block;
position: relative;
width: 100%;
}
#dummy {
margin-top: 20%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver
/* show me! */
}
#wrapper {
display: table;
width: 100%;
}
#row {
display: table-header-group;
}
#left {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
#incenter {
display: table-cell;
background-color: aqua;
}
#right {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
<div>
<div id="container">
<div id="dummy"></div>
<div id="element">
k (20%)
</div>
</div>
<div id="wrapper">
<div id="row">
<div id="left">width = k (20%)</div>
<div id="incenter">incenter</div>
<div id="right">width = k (20%)</div>
</div>
</div>
</div>
Another example with measurements in pixels is here.
For explanation refer:
https://stackoverflow.com/a/12121309/2534513
https://stackoverflow.com/a/6615994/2534513
I have actually combined techniques mentioned in above two answers to make this one.
Using JavaScript would have been a lot easier.
I have a wrapper div in my css that covers most of my viewport. I have a background color and inside that div, I have two more divs floated right and left respectively.
When I'm with Chrome, I can see the background code perfectly, but when I'm with Firefox, the background color is not seen. Here are some screenshots:
On Chrome:
On Firefox
And here's the code.
My HTML:
<div id="wrapper">
<div id="asd"></div>
<div id="perejavi">
<p id="pere">Pere</p>
<p id="and">&</p>
<p id="javi">Javi</p>
</div>
<div id="web">
<p id="programmer">Programación</p>
<p id="programmer2">diseño web</p>
</div>
My CSS:
#wrapper {
background-color: #00CE6B;
height: auto;
min-height: 93%;
width: 85%;
color: #ffffff;
margin: 0 auto;
}
#perejavi {
margin: 0;
font-size: 9.1em;
float: left;
padding-bottom: 0;
height: 60%;
width: 50%;
}
#web {
margin: 0;
width: 50%;
height: 60%;
float: right;
}
Why is this happening? Hope you can help!;)
Floats remove the HTML element from the normal document flow and can cause issues like this. There are a couple ways to handle floats but i'll just give you the way I prefer to do it:
in your css:
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
Then in your HTML:
<div id="wrapper" class="clearfix>
This creates a pseudo element as the last child of your .clearfix div which clears the floated elements contained within the .clearfix div
note: Also, you seem to be missing your closing </div> for your wrapper div. Make sure you add that in
Further reading on floats and the strangeness they bring with them:
http://css-tricks.com/all-about-floats/
Example
There is a margin-bottom set for each sidebar-block of 10px, it appears as the inner div which is sidebar-block.body is flowing out of the container.
I researched and debugged and cannot find the cause for this, the only time I use floats is on the main #sidebar itself.
HTML
<div id="sidebar">
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">profile</div></div>
<div class="sidebar-block body"></div>
</div>
<div class="sidebar-block">
<div class="sidebar-block title"><div class="text-with-margin">forum activity</div> </div>
<div class="sidebar-block body"></div>
</div>
</div>
CSS
#sidebar {
float: right;
width: 268px;
margin-top: 10px;
}
.sidebar-block {
margin-bottom: 10px;
}
.sidebar-block.title {
background-color: #2E392F;
min-height: 47px;
color: white;
font-size: 1.2em;
}
.sidebar-block.body {
overflow: hidden;
background-color: white;
}
.text-with-margin {
width: 100%;
padding: 0.5em 0.5em 0.5em 0.5em;
display: block;
}
Fixed, it was because I used .sidebar-block title, .sidebar-block body in a way so that the css for .sidebar-block would automatically be applied to them, not my intention so I renamed the divs.
According to your comment. Change your code for that
#sidebar > .sidebar-block
{
margin-bottom: 10px;
}
Demo: http://jsfiddle.net/fvjw5/1/
You have to set the maximum width of the Sidebar element.
As it is, the Sidebar element does not have a fixed size, which will nullify the
.text-with-margin {
width: 100%; // The width. You should change this.
...
}
See this post for information about position: CSS Positions
You should try something like:
#sidebar {
width: 100%; // Or whatever size you want the sidebar to be.
position: relative; // You can play with this for different results.
...
}
You can look at the information provided on the answer below:
Responsive web design
I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?
I made a fiddle to show. I want the red and blue divs to be the same height...
http://jsfiddle.net/7RVh4/
this is the css:
#wrapper {
width: 300px;
}
#left {
width:50px;
background: blue;
float:left;
height: 100%; /* sadly, this doesn't work... */
}
#right {
width:250px;
background: red;
float:left;
}
You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:
#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
Antony answer works ok, but you need all the divs to have the same parent and to have a wrapper, I have a solution that use javascript but works with any kind of element, they just need to have the same selector.
function setEqualHeight(selector, triggerContinusly) {
var elements = $(selector)
elements.css("height", "auto")
var max = Number.NEGATIVE_INFINITY;
$.each(elements, function(index, item) {
if ($(item).height() > max) {
max = $(item).height()
}
})
$(selector).css("height", max + "px")
if (!!triggerContinusly) {
$(document).on("input", selector, function() {
setEqualHeight(selector, false)
})
$(window).resize(function() {
setEqualHeight(selector, false)
})
}
}
setEqualHeight(".sameh", true)
http://jsfiddle.net/83WbS/2/
I would recommend reading this article that explains how to do what you are trying to do. I would put a fiddle up that shows, but its pretty extensive and pure css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
There is a much simpler solution I want to point to. Using large padding-bottom: 500em and negative margin-bottom:-500em of the same amount on columns while the wrapper has simply overflow:hidden to cut the columns to the right size.
Found here:
HTML/CSS: Making two floating divs the same height
As indicated by Hexodus you can padding-bottom and margin-bottom, but a better solution would be to use flexbox or grid.
You can check this codepen if you want. I included a footer area because that is something I needed and it required a little bit more of hack.
.section {
width: 500px;
margin: auto;
overflow: hidden;
padding: 0;
}
div {
padding: 1rem;
}
.header {
background: lightblue;
}
.sidebar {
background: lightgreen;
width: calc(25% - 1rem);
}
.sidebar-left {
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.main {
background: pink;
width: calc(50% - 4rem);
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.sidebar-right {
float: right;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.footer {
background: black;
color: white;
float: left;
clear: both;
margin-top: 1rem;
width: calc(100% - 2rem);
}
<div class="section">
<div class="header">
This is the header
</div>
<div class="sidebar sidebar-left">
This sidebar could have a menu or something like that. It may not have the same length as the other
</div>
<div class="main">
This is the main area. It should have the same length as the sidebars
</div>
<div class="sidebar sidebar-right">
This is the other sidebar, it could have some ads
</div>
<div class="footer">
Footer area
</div>
</div>
You can do this without using tables, by using this CSS trick.
Example - http://jsfiddle.net/LMGsv/
HTML
<div id="wrapper">
<div id="columns">
<div id="left">text</div>
<div id="right">text<br/>another line<br /></div>
</div>
</div>
CSS
#wrapper {
float:left;
width: 300px;
}
#columns {
float:left;
width:300px;
background:blue;
}
#left {
float:left;
width:50px;
background: blue;
}
#right {
width:250px;
background: red;
float:left
}