I'm trying to get the main content area and the sidebar to have the same background and the same height. I thought it would work if I the both sub-classes in the same <div>, but obviously it doesn't work. Is there a simple way to achieve this, or do I have to go for some of the faux column trickery?
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1>Page title</h1>
<h3>Subtitle</h3>
</div>
<div id="main">
<div class="content">This is the main area</div>
<div class="sidebar">This is the sidebar</div>
</div>
<div id="footer">
The footer;
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
background-color: #ff1;
}
#wrapper {
width: 800px;
margin: 0 auto;
}
#header {
background-color: rgba(255,255,255,0.7);
}
#nav {
background-color: rgba(255,255,255,0.7);
}
#main {
background-color: rgba(255,255,255,0.7);
}
.content, .sidebar {
float: left;
padding: 20px;
}
.content {
width: 510px;
}
.sidebar {
width: 210px;
}
#footer {
background-color: rgba(255,255,255,0.7);
clear:both;
}
Fiddle
The wrapping container ( #main ) doesn't expand to the height of the child elements, because they both are floated. You could add a clearfix or just
overflow: auto;
to the #main element.
In the jsfiddle, it seems that they do have the same height and background.
Am I missing something ?
Related
How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
I've had alot of trouble keeping my footer on the bottom, when my main div is short on content. But I fixed it with the sticky footer trick. But unfortunately I still have this problem where my main div won't stretch all the way down to the footer when it's short on content. I have fixed this with JS by adding an extra div in the empty space if the main div's bottom edge + the footer were smaller than the viewport. But that's no longer an option since i want to support non js users.
html, body {
height: 100%;
background-color: #678dae;
margin: 0px;
padding: 0px;
}
#wrap {
min-height: 100%;
}
#main {
width: 70%;
/* I need them to be centered like this because my div is being resized from time to time */
margin-left: auto;
margin-right: auto;
overflow:auto;
padding-bottom: 150px;
background-color: #fff;
}
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
background-color: #333;
clear:both;
}
<div id="wrap">
<div id="main">
<div id="content">
<p>Div content</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
</div>
</div>
</div>
<div id="footer">
<p>Footer content</p>
</div>
Please try this:
#footer {
background-color: #333;
bottom: 0;
height: 150px;
position: absolute;
width: 100%;
}
html, body {
height: 100%;
background-color: #678dae;
margin: 0px;
padding: 0px;
}
#wrap {
min-height: 100%;
}
#main {
width: 70%;
/* I need them to be centered like this because my div is being resized from time to time */
margin-left: auto;
margin-right: auto;
overflow:auto;
padding-bottom: 150px;
background-color: #fff;
}
#footer {
position: fixed;
margin-top: -150px; /* negative value of footer height */
height: 25px;
background-color: #333;
bottom:0;
width:100%;
}
<div id="wrap">
<div id="main">
<div id="content">
<p>Div content</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
</div>
</div>
</div>
<div id="footer">
<p>Footer content</p>
</div>
I have changed few footer properties
height: inherit; may help.. this usually helps with height aspects...
I am new to this, so the page is for practice. I can't seem to get the "p" or "h1" tags to show up in, what should be the middle of my page. Here is my html code:
<body>
<div class="container">
<div id="top">
<div id="bottom">
<div id="left">
<div id="right">
</div>
<!--Attempted to use a p tag here -->
<!--right div end-->
</div>
<!--left div end-->
</div>
<!--bottom div end-->
</div>
<!--top div end-->
</div>
<!--container div end-->
<!--Attempted to use a p tag here as well thinking it may show up in a different location-->
</body>
My CSS looks like this:
#top,
#bottom,
#left,
#right {
background: #666666;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 100px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
If anyone could let me know what I am doing wrong it would be very appreciated. I tried to mess with the positioning a bit with no luck, and I also attempted to give the p tags a z-index but I don't know if that was even something that could have worked properly to begin with.
This is a perfectly acceptable and simpler way to achieve what you want.
body {
background-color: #666666;
width: 100%;
margin: 0;
}
#container {
background-color: blue;
width: 80%;
height: 100px;
margin: auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
<body>
<div id="container">
<h1>HEADER 1</h1>
<p>PARAGRAPH 1</p>
</div>
</body>
Go with float and clear in the css segments
<html>
<head>
<style type="text/css">
#wrapper{background-color:red;width:100%; margin: auto;}
#top{background-color:blue; height:100px;}
#left{background-color:green; width:10%; height:100px;float:left;}
#right{background-color:yellow; width: 10%; height:100px;float:right;}
#bottom{background-color:grey; height:100px;clear:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="left">left</div>background
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
A trick to center elements in the middle is:
#left{
margin-left: auto;
margin-right: auto;
}
but if you're just looking to center the <h1> or <p> then this would work:
p {
text-align: center;
}
h1 {
text-align: center;
}
Is there a "pure" way to achieve this layout where there is fixed content and equal fluid gutters, i.e. a way without using calc?
Fiddle
HTML:
<body>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</body>
CSS:
body {
min-width: 300px;
}
.content {
width: 100px;
height: 100px;
background: blue;
float: left;
margin-left: calc((100% - 300px) / 4);
}
Unfortunately not. You could use a way to "almost" make it like that by using wrapper divs for each .content and style the wrappers to be one third of the body width. Within each wrapper you center the blue boxes. The drawback of that is the distance between the blue boxes is twice as wide as the distance from the outer blue boxes to the body border.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
min-width: 300px;
width: 100%;
}
.content-wrapper {
width: 33.3333%;
text-align: center;
float: left;
}
.content {
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
}
<body>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
<div class="content-wrapper"><div class="content"></div></div>
</body>
I fiddled around a bit and almost achieved a solution:
Fiddle
HTML:
<body>
<div id="wrap">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
CSS:
body {
margin: 0;
}
#wrap {
text-align: justify;
}
.content {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
}
#wrap:before {
content:"";
display: inline-block;
}
#wrap:after {
content:"";
width:100%;
display: inline-block;
}
If multiple pseudo-elements were possible, we could generate an empty inline-block (the same "empty word" as the :before) as :after(1) and the element with width:100% as :after(2).
Well, I couldn't get it to work. But thanks to you Paul for your answer and thanks chipChocolate.py and myfunkyside for the edit!
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}