While trying to create a div 'ed structure I am having difficulty on covering a background color.
in the example below the wrap div is not covering other layers.
There is something I am missing in the css but cannot figure out what is the problem :(
Any help would be great :)
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial;
}
html {
height: 100%;
}
body {
background: #688420;
height: 100%;
font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
#column {
position: relative;
width: 950px;
margin: auto;
}
#wrap {
background-color:#FF0;
}
.wrapleft {
background-color: #039;
text-align: left;
float:left;
width:60%;
}
.wrapright {
background-color:#3F9;
text-align:left;
float:left;
width: 35%;
}
.seperator {
width:5%;
background-color:#9CC;
float:left;
}
.space {
width:100%;
height:20px;
clear:both;
}
#wrapContent {
background-color: #C3F;
}
</style>
</head>
<body>
<div id="main">
<div id="column">
<div id="wrapContent">
<div id="wrap">
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
<div class="space"> </div>
<div class="wrapleft">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div><!-- wrapleft -->
<div class="seperator"> </div>
<div class="wrapright">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris. </p>
</div> <!-- wrapright -->
</div><!-- wrap -->
</div> <!-- column -->
</div> <!-- main -->
</body>
</html>
You have to clear your floats:
#wrap {
background-color:#FF0;
overflow: hidden;
}
Related
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
I have 3 div, 2 are floating left and the other floating right. However it is not aligning in the way I want.
.numb1, .numb2 {
float: left;
width: 60%;
display: inline-block;
}
.numb3, .numb4 {
float: right;
width: 35%;
display: inline-block;
}
Here is a snippet so you have an idea of what problem; https://jsfiddle.net/rnty32gt/
I want the class numb3 to be aligned with numb1. I tried to use inlineblock but it is not working. Sorry for my English.
Make this way using this css and html
.numb2 ,.numb3 {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
This is how you could do it to have it fixed as you wish. But you could also use flex-box. Here is some info about flex-box: https://www.w3schools.com/css/css3_flexbox.asp
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
So as you can see i have changed the order of div2 and div3 in your HTML.
There you go.
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
margin:0px;
float: left;
width: 60%;
border:none;
}
.numb1, .numb2 {
}
.numb3 {
float: right;
width: 35%;
}
<div class="wrap-l">
<div class="numb1">
Text 1
</div>
<div class="numb2">
Text 2
</div>
</div>
<div class="numb3">
Text 3
</div>
give width: 30%; for numb1 and numb 2
If you want to use floats, just put the .numb3 above the other divs in your markup : https://jsfiddle.net/5vbvjwcs/
Otherwise you can use flex :
section {
display: flex;
}
.leftColumn {
width: 60%;
}
.content {
padding: 10px;
background-color: #eaeaea;
margin: 10px;
flex: 1;
}
<section>
<div class="leftColumn">
<div class="content">
Numb1
</div>
<div class="content">
Numb2
</div>
</div>
<div class="content">
Numb3
</div>
</section>
Doe,
If you want div.numb3 align with div.numb1 you should change the order like this:
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
margin-left: 12.5%;
margin-right: 12.5%;
margin-top: 24%;
width: 25%;
}
<section>
<aside class="aside">
<div class="container-text">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
I have a layout with an aside that takes up half the screen. The content inside the aside will stay fixed for a period of time. That's being stored in the container-text container. I would like everything in this container to stay fixed, however I would like the "hello" header text both horizontally and vertically centered. The "how" "are" "you" should be be at the bottom of the screen, centered with space between (they will be navigation). I managed to center a fixed container, but could not position the navigation. It is responsive left/right, but not top/bottom (I would like nav to stay at bottom and "Hello" to stay centered).
Is this what you are looking to achieve?
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
display:flex;
justify-content:center;
align-items:stretch;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
height: 100vh;
display:flex;
}
.container-text-inner {
height:50%;
position:relative;
top:50%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.container-nav {
display:flex;
flex-wrap: no-wrap;
margin-bottom:15px;
}
.container-nav p {
margin-right:15px;
}
<section>
<aside class="aside">
<div class="container-text">
<div class="container-text-inner">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
Having problems with my code. Why .right_content falls under .left_content?
they both have float: left and .right_content text should adapt to screen width...
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
max-width: 600px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
The right content has full width in your case. Try to give a width for it!
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
width: 350px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Tip: If you are using fixed width + variable width, this is not the approach. Use this:
.parent {padding-left: 100px; position: relative;}
.fixed {width: 90px; left: 5px; background: #fcc; position: absolute;}
.variable {background: #ccf;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="variable">Variable</div>
</div>
Try using percent widths on your left and right content divs: https://jsfiddle.net/cucgc5qh/
<div class="content">
<div class="left_content"></div>
<div class="right_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus, nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.</div>
</div>
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
width: 50%;
}
.left_content {
background: blue;
float: left;
width: 50%;
height: 400px;
}
The .right_content doesn't have a width. Try adding width:calc(100% - 250px)
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
overflow:auto;
}
.right_content {
float: left;
width:calc(100% - 250px)
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Another approach is to forget floats and use table and table-cell. This gives you better browser compatibility as well.
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
display:table;
}
.content> div{
display:table-cell;
vertical-align:top;
}
.left_content {
background: blue;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Just don't float the right element:
.content {
overflow: hidden;
margin-bottom: 50px;
width: 100%;
}
.right_content {
max-width: 600px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content"></div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Here's an example demonstrating this problem:
http://jsfiddle.net/93twL/
Here's the code (same as the jsfiddle):
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
</body>
</html>
html{
min-height:100%;
height:100%;
}
body{
height:100%;
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px black;
}
h1{
margin-top:0;
}
#container{
clear:both;
width:100%;
height:100%;
float:left;
box-shadow: inset 0 0 1px 1px black;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
float:left;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
As seen in the example by looking at the borders, once the content goes above 100% heigtht, the content overflows. I'd rather have the element expand.
To fix this, one would remove specifying the height. However, if there is no height specified then how am I supposed to control the height of all the content?(using percentages) I need buttons, headers, footers and so on that need a height set to it. (Without HTML and BODY having a 100% height, no other elements will be able to set a height using percentages)
In case it is not clear, I am talking about a fluid layout where the height is given in percentages.
So is this even possible or should I just give this up?
I think what you're after is a fluid width 100% and 100% height, so that the content vertically and horizontally expands. That is a tough thing and can't be done with css alone, flexbox might be able to do it, though I don't know. I saw it recently done with CSS and jQuery using a fixed height on both the header and footer, but the rest is fluid height and width:
http://codepen.io/anon/pen/EsJHu
I made it more responsive here: http://jsbin.com/momep/7/edit
CSS
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Sticky footer */
html, body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
#sticky-footer-wrap {
overflow: auto;
padding-bottom: 100px;
}
.site-main {
overflow: hidden;
height: 100%;
}
.site-footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
/* Header */
.site-header {
height: 100px;
}
#media (min-width:992px) {
/* 3 columns */
#primary {
float: left;
width: 50%;
margin-left: 25%;
}
#secondary {
float: left;
width: 25%;
margin-left:-75%;
}
#tertiary{
float: left;
width: 25%;
}
}
/* Colours */
.site-header {
background: #C5E0DC;
}
#primary {
background-color: #F1D4AF;
}
#secondary {
background-color: #ECE5CE;
}
#tertiary{
background-color: #E08E79;
}
.site-footer {
background: #774F38;
}
HTML
<div id="page">
<div id="sticky-footer-wrap">
<header class="site-header">
<h3>Header</h3>
</header>
<div class="site-main">
<div id="primary">
<h2>Primary content</h2>
<h1>Layout Features</h1>
<ul>
<li>Header (fixed height)</li>
<li>3 fluid columns</li>
<li>100% or full height columns (jQuery)</li>
<li>Sticky footer (fixed height)</li>
<li>Correct source order of columns</li>
<li>IE8 compatible (Modernizr)</li>
</ul>
</div>
<div id="secondary">
<h3>Secondary content</h3>
</div>
<div id="tertiary">
<h4>Tertiary content</h4>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<h3>Footer (sticky)</h3>
</footer>
jQuery
// On page load
$(window).load(columnHeight);
// On window resize
$(window).resize( function () {
// Clear all forced column heights before recalculating them after window resize
$("#primary").css("height", "");
$("#secondary").css("height", "");
$("#tertiary").css("height", "");
columnHeight();
});
// Make columns 100% in height
function columnHeight() {
// Column heights should equal the document height minus the header height and footer height
var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
$("#primary").css("height", newHeight);
$("#secondary").css("height", newHeight);
$("#tertiary").css("height", newHeight);
}
You can replace height with min-height: 100%. And at the end of your HTML add a div with css rule clear: both to clean up all the floating elements.
So it will look like this :
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
<div style='clear:both'></div>
</body>
</html>
I'm not entirely sure what you're attempting to do here, but how about this?
http://jsfiddle.net/9X8j2/
Only the CSS changed:
body{
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px blue;
}
h1{
margin-top:0;
}
#container{
width:100%;
box-shadow: inset 0 0 1px 1px gray;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
I changed the color of the box shadows to tell them apart a little easier.
Removing most of the height attributes may be what you're looking for.. including removing the CSS on the HTML tag. At least now the container does not overflow the body.
Please let me know if this is at all helpful.