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>
Related
I'm trying to place 6 divs with different height on 3 columns.
I use float property for divs on the left and on the right and margin: 0 auto for central divs.
Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.
Instead they are aligned the lowest div.
Here's the fiddle: fiddle
div {
border: 1px solid red;
width: 30%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Thanks for help,
Piero.
You can try this one.
Html Code
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Css Code
.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}
check fiddle https://jsfiddle.net/Dhavalr/9cyq8tu9/
Put them in 3 columns/DIVs 33.33% wide which you float:
https://jsfiddle.net/8Lbc5pq7/4/
HTML:
<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>
CSS:
div {
border: 1px solid red;
width: 95%;
}
.column {
float: left;
border: none;
width: 33.33%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
try using this style:
div {
border: 1px solid red;
width: 30%;
display:inline-block;
}
.left {
float: left;
height: 200px;
}
.center {
margin: 0 auto;
height: 50px;
}
Please try this code
<style>
div {
border: 1px solid gray;
width: 33.1%;
}
.left {
float: left;
height: 200px;
}
.right {
float: left;
height: 100px;
}
.center {
margin: 0 auto;
float:left;
height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/
I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 400px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MOCKUP</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 1200px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
</style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
</html>
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/
For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container">
<div class="header">
<h4>This is header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left Col</div>
<div class="middle">Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
</div>
<div class="right">Right Col</div>
</div>
</div>
<div class="footer">
<h4>This is footer</h4>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background: brown;
display: table-cell;
vertical-align: middle;
}
I need the #infoBar div and the #actualCover div to sit to the right of (next to) the #covers div, but for some reason, the covers div is acting like it's not even there and floats on top of the other divs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
border: solid 1px orange;
}
#coverArea
{
border: solid 1px red;
width: 760px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
border: solid 2px #BFDEFF;
padding: 10px;
background-color: #F0F7FF;
margin-right: 30px;
}
#infoBar
{
height: 30px;
border: solid 1px green;
width: 600px;
}
#actualCover
{
width: 794px;
height: 1123px;
background-position: top left;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">
</div>
<div id="infoBar">
</div>
<div id="coverArea">
<div id="actualCover">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Here you go.
As a good practice, get your layout correct first before you set padding and margins.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#chooserContainer
{
background: #ccc;
width: 911px;
}
#covers
{
width: 150px;
float: left;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
background-color: #0ff;
}
#infoBar
{
height: 30px;
width: 600px;
float: right;
background: yellow;
}
#coverArea
{
width: 760px;
float: right;
background: #f60;
}
#actualCover
{
width: 794px;
height: 600px;
}
</style>
</head>
<body>
<div id="chooserContainer">
<div id="covers">Coveres
</div>
<div id="infoBar">InfoBar
</div>
<div id="coverArea">CoverArea
<div id="actualCover">ActualCover
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In this case, it sounds like you want #infoBar and #coverArea to float to the right of #covers instead of #covers floating to the left of the other two.
Try taking the float off of #covers and adding float: right; to #infoBar and #coverArea