I cannot get this red div wrap to stretch down past the other divs. I've tried using the clear:both; attribute, and a few other combinations, but to no avail. Can anyone tell me what I'm doing wrong? Thanks
#footer-wrap{
width:100%;
height:auto;
margin: 0 auto;
background:#dc0000;
}
#footer{
width:960px;
height:auto;
margin: 0 auto;
background:#dc0000;
padding: 30px 0 30px 0;
}
.footer-class{
width:126px;
height:200px;
float:left;
background:#093;
margin:0 30px 0 0;
}
.footer-class-end{
width:180px;
float:right;
background:#FF0;
}
<div id="footer-wrap">
<div id="footer">
<div class="footer-class"><h5>products</h5></div>
<div class="footer-class"><h5>support</h5></div>
<div class="footer-class"><h5>information</h5></div>
<div class="footer-class"><h5>legal</h5></div>
<div class="footer-class"><h5>interactive</h5></div>
<div class="footer-class-end"><h5>twitter</h5></div>
</div></div>
You have to clear left float with clear: left.
#footer-wrap {
width: 100%;
height: auto;
margin: 0 auto;
background: #dc0000;
}
#footer {
width: 960px;
height: auto;
margin: 0 auto;
background: #dc0000;
padding: 30px 0 30px 0;
}
.footer-class {
width: 126px;
height: 200px;
float: left;
background: #093;
margin: 0 30px 0 0;
}
.footer-class-end {
width: 180px;
float: right;
background: #FF0;
}
.clear {
clear: left;
}
<div id="footer-wrap">
<div id="footer">
<div class="footer-class">
<h5>products</h5>
</div>
<div class="footer-class">
<h5>support</h5>
</div>
<div class="footer-class">
<h5>information</h5>
</div>
<div class="footer-class">
<h5>legal</h5>
</div>
<div class="footer-class">
<h5>interactive</h5>
</div>
<div class="footer-class-end">
<h5>twitter</h5>
</div>
<div class="clear"></div>
</div>
</div>
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?
A new way clearing floats without extra markup is by putting clear at :after pseudo-element (but has less browser compatibility).
#footer:after {
content: "";
clear: both;
display: block;
}
#footer-wrap {
width: 100%;
height: auto;
margin: 0 auto;
background: #dc0000;
}
#footer {
width: 960px;
height: auto;
margin: 0 auto;
background: #dc0000;
padding: 30px 0 30px 0;
}
#footer:after {
content: "";
clear: both;
display: block;
}
.footer-class {
width: 126px;
height: 200px;
float: left;
background: #093;
margin: 0 30px 0 0;
}
.footer-class-end {
width: 180px;
float: right;
background: #FF0;
}
<div id="footer-wrap">
<div id="footer">
<div class="footer-class">
<h5>products</h5>
</div>
<div class="footer-class">
<h5>support</h5>
</div>
<div class="footer-class">
<h5>information</h5>
</div>
<div class="footer-class">
<h5>legal</h5>
</div>
<div class="footer-class">
<h5>interactive</h5>
</div>
<div class="footer-class-end">
<h5>twitter</h5>
</div>
</div>
</div>
Reference: MDN - Clear
Or add just overflow:hidden to wrapper. http://jsfiddle.net/5a8vmr4r/1/
This is well known issue with floated elements...
You didn't add clearfix, thats why it doesn't work.
http://jsfiddle.net/5a8vmr4r/3/
Related
I've got the following two containers that should be 1400px width in total. The problem in my code is that the background isn't 100% width when I want the two containers to be 1400px.
How can I achieve this the best way? I hope you guys get my problem.
I am using the following code:
.wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 50px;
}
#left-container {
width: 50%;
background: blue;
float: left;
}
#right-container {
width: 50%;
background: green;
float: left;
}
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
You can use pseudo element in addition to background for the coloration and you can have some overflow:
.wrapper {
max-width: 1400px;
margin: 0 auto;
padding:0 50px;
}
#left-container {
width: 50%;
background: blue;
float: left;
position:relative;
}
#left-container:before {
content:"";
position:absolute;
left:-100vw;
right:100%;
top:0;
bottom:0;
background:inherit;
}
#right-container {
width: 50%;
background: green;
float: left;
position:relative;
}
#right-container:before {
content:"";
position:absolute;
right:-100vw;
left:100%;
top:0;
bottom:0;
background:inherit;
}
body {
overflow:hidden;
}
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
It can be done in many ways. The most simple solution I can think of now is to add a container and use a linear gradient:
body {margin:0; padding:0;}
.container {
background: linear-gradient(to left, blue 50%, green 50%);
}
.wrapper {
border: 1px solid white;
max-width: 1400px;
margin: 0 auto;
overflow: auto;
}
#left-container,
#right-container{
box-sizing: border-box;
width: 50%;
float: left;
padding-left: 50px;
}
<div class="container">
<div class="wrapper">
<div id="left-container">
<h2>Left container</h2>
</div>
<div id="right-container">
<h2>Right container</h2>
</div>
</div>
</div>
screenshot
Image size is 100% width.
Trying to make two columns and three columns below.
Fourth and fifth column height does not match the column height.
padding-right 5px must also apply.
a,b,c = image size (224x224)
d = image size (448x224)
e = image size (224x224)
How can I do this?
<div id="box-wrapper">
<div class="box-banner">
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
</div>
<div class="box-banner-two">
<div class="box-button-two"><img src="/448x224/random/ffffff"></div>
<div class="box-button-two"><img src="/224/random/ffffff"></div>
</div>
</div>
#box-wrapper {
padding-top: 10px !important;
padding-left: 5px !important;
padding-right: 5px !important;
height: 100%;
position: relative;
float: left;
}
.box-banner,
.box-banner-two {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.box-button {
float: left;
width: 32.444%;
margin: 0 5px 5px 0;
}
.box-button img,
.box-button-two img {
width: 100%;
}
.box-banner .box-button:nth-child(3) {
margin-right: 0px;
float: right !important;
}
.box-banner-two .box-button-two:nth-child(1) {
float: left;
width: 64.888%;
margin: 0 5px 5px 0;
}
.box-banner-two .box-button-two:nth-child(2) {
float: right;
width:32.444%;
margin: 0 5px 5px 0;
margin: 0;
}
I modified the html and css posted by you to achieve the same effect. I hope this helps.
Try to avoid important as much as possible.
*, *:after {
box-sizing: border-box;
}
a {
display: block;
text-decoration: none;
background-color: burlywood;
height: 224px;
text-align: center;
line-height: 224px;
}
#box-wrapper {
padding: 10px 5px 0 5px;
height: 100%;
position: relative;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.box-button {
float: left;
width: 33.333%;
padding: 0 5px 5px 0;
}
.col-2 {
width: 66.666%;
}
<div id="box-wrapper">
<div class="box-banner clearfix">
<div class="box-button">
A Link
</div>
<div class="box-button">
A Link
</div>
<div class="box-button">
A Link
</div>
</div>
<div class="box-banner clearfix">
<div class="box-button col-2">
A Link
</div>
<div class="box-button">
A Link
</div>
</div>
</div>
Your are over complicating stuff with margin and paddings. The secret here is using box-sizing: border-box. Understand it better here
Apply the box-sizing to the .banner and its childrens
.banner {
box-sizing: border-box;
}
.banner * {
box-sizing: inherit;
}
Also apply to the img the width and padding you need
.banner img {
width: 100%;
}
.banner > * {
padding: 5px;
}
To better help you on layout add col- classes to each img parent
.col1-3 {
width: 33.333%;
}
.col2-3 {
width: 66.666%;
}
The html:
<div class="banner cf">
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
</div>
<div class="banner cf">
<div class="col2-3"><img src="http://www.amnh.org/var/ezflow_site/storage/images/media/amnh/images/learn-teach/program-images/teacher-programs-images-folder/data-viz-images-folder/data-viz-webinar-image-3/655567-3-eng-US/data-viz-webinar-image-3_imagelarge.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
</div>
A working example:
http://codepen.io/sandrina-p/pen/PGQKrQ
try this..
#box-wrapper {
padding-top: 10px !important;
padding-left: 5px !important;
padding-right: 5px !important;
height: 100%;
position: relative;
}
.box-banner,
.box-banner-two {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.box-button {
float: left;
width: 32.444%;
margin: 0 5px 5px 0;
}
.box-button img,
.box-button-two img {
width: 100%;
}
.box-banner .box-button:nth-child(3) {
float: right !important;
}
.box-banner-two .box-button-two:nth-child(1) {
float: left;
width: 64.888%;
margin: 0 5px 5px 0;
}
.box-banner-two .box-button-two:nth-child(2) {
float: right;
width:32.444%;
margin: 0 5px 5px 0;
margin: 0;
}
<div id="box-wrapper">
<div class="box-banner">
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
</div>
<div class="box-banner-two">
<div class="box-button-two"><img src="/448x224/random/ffffff"></div>
<div class="box-button-two"><img src="/224/random/ffffff"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE
HTML
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
</div>
CSS
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.panel {
background-color: red;
}
Question:
How can I add another div that I can place under div.right? The div that I want to place under .right will be .under_right and the CSS is:
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
}
http://jsfiddle.net/daQ22/2/
Add:
clear:both;
float:right;
to under_right
Working DEMO
Add a div in html like this:
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">Blue</div>
<div class="new_div">New</div> <-- Added this new div here
</div>
and use this CSS:
.new_div { background-color: white; width:320px; float: right; }
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right"></div>
<div class="underright"></div>
</div>
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: gold;
float: right;
}
As long as the div .underright is underneath div .right, the float will obey that structure.
Edit Just a quick note, perhaps adding display: block; to the css will help, especially if you change the size of the outer container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
background-color: #000;
margin: 130px auto;
min-height: 320px;
width: 940px;
overflow: auto;
padding: 0px 10px;
}
.left {
width: 600px;
margin-right: 20px;
float: left;
}
.right {
width: 320px;
height: 100% auto;
overflow: auto;
background-color: blue;
float: right;
}
.under_right {
width: 320px;
height: 100% auto;
overflow: auto;
margin-top:30px;
background-color: gold;
}
.panel {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="panel">My Panel</div>
</div>
<div class="right">
<div class="under_right">It is under right.</div>
</div>
</div>
</body>
</html>
How could I change this grid layout so that the second row of blocks sit just below the corresponding block above it instead of forming a completely new row?
http://jsfiddle.net/AndyMP/wSvrN/
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
position: absolute;
width: 60%;
left: 50%;
margin-left: -30%;
border: 1px dotted #333;
padding: 20px;
}
.box1 {
position: relative;
float: left;
width: 100px;
height: 150px;
background: #666;
margin: 0 15px 15px 0;
}
.box2 {
position: relative;
float: left;
width: 100px;
height: 200px;
background: #666;
margin: 0 15px 15px 0;
}
.box3 {
position: relative;
float: left;
width: 100px;
height: 100px;
background: #666;
margin: 0 15px 15px 0;
}
HTML
<div id="container">
<div class="box1"></div>
<div class="box3"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>
</div>
You can not achieve this with Pure CSS. You have to use http://masonry.desandro.com/ for this.
Do you mean like this ?
http://jsfiddle.net/LtLrx/
CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
position: absolute;
width: 60%;
left: 50%;
margin-left: -30%;
border: 1px dotted #333;
padding: 20px;
}
.contleft
{
float: left;
margin-right: 15px;
width: 30%;
position: relative;
height: 100%;
}
.contmiddle
{
float: left;
margin-right: 15px;
width: 30%;
position: relative;
height: 100%;
}
.contright
{
float: left;
width: 30%;
position: relative;
height: 100%;
}
.box1 {
position: relative;
float: left;
width: 100px;
height: 150px;
background: #666;
margin: 0 15px 15px 0;
}
.box2 {
position: relative;
float: left;
width: 100px;
height: 200px;
background: #666;
margin: 0 15px 15px 0;
}
.box3 {
position: relative;
float: left;
width: 100px;
height: 100px;
background: #666;
margin: 0 15px 15px 0;
}
HTML:
<div id="container">
<div class="contleft">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box1"></div>
</div>
<div class="contmiddle">
<div class="box2"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="contright">
<div class="box3"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
</div>
I don't exactly get what you want. When I put that code into a test file, I get the following in my browser:
To me, it looks like the last two blocks are exactly below the other blocks in that same column.
A problem may be that you are specifying the width of the container as a percentage of the screen, and the width of the blocks as an absolute value.
Please comment, so I can make my answer clearer, this is all the info I can make from your question.