I've played around for a while with float, display, inline-block, inline, block, and can't seem to find the right way to "justify" the divs with in the div. Here is the HTML portion of it:
<body>
<div id="container">
<div align="center" id="header">
<h1>This is my header area</h1>
</div>
<nav>
HOME |
COC |
ID CARDS |
SCHEDULE |
FORMS |
CFS |
MEDIA |
LINKS |
CONTACT US
</nav>
<div class="boxes">
<div id="box1">
Content box 1
</div>
<div id="box2">
Content box 2
</div>
<div id="box3">
Content box 3
</div>
</div>
<div id="main">
<h1>This is the main Div</h1>
<p>This is my paragraph Area</p>
</div>
<div align="center" id="footer">
<h3>(This is my footer area)<br>
Copyright 2012-2013 blah blah blah </h3>
</div>
</div>
</body>
This is my CSS:
body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;
}
nav {
padding:10px;
}
#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;
}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;
}
#box1 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#box2 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#box3 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#main {
clear:both;
}
I've researched it but I can't really seem to get it right.
I want box 1 2 and 3 to even space throughout the width of the
Any suggestions?
replace your css with below--
body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;
}
nav {
padding:10px;
}
#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;
}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;
}
#box1 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
margin-left:60px;
}
#box2 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
padding-left:25px;
margin:10px;
padding:10px;
}
#box3 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#main {
clear:both;
}
Best of luck !
You can give each of your 3 boxes a 25% of width to fit the parent div.
#box1 {
width: 25%;
}
#box2 {
width: 25%;
}
...
http://jsfiddle.net/4chjf/1/
Related
How to get inline divs with scrollbar and other divs inside them. When I made just inline divs with scrollbar everything works fine, but when I try to put other divs inside everything collapse.
I need to have something like this:
Simple code:
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
CSS 1(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
position:relative;
}
#customDiv1{
position:absolute;
left:10px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:20px;
width:60px;
height:50px;
}
CSS 2(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
}
#customDiv1{
margin-top:50px;
width:50px;
height:50px;
}
#customDiv2{
margin-top:10px;
width:60px;
height:50px;
}
CSS 3(scrollbar not working):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
float:left;
position:relative;
}
#customDiv1{
position:absolute;
left:20px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:10px;
width:60px;
height:50px;
}
Apply vertical-align: top; to the inline-blocks to make them align at the top of their container:
div {
border: 1px solid #777;
}
.inlineContainer {
width: 100%;
height: 150px;
overflow: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv {
height: 100px;
width: 100px;
display: inline-block;
vertical-align: top;
}
#customDiv1 {
margin-top: 50px;
width: 50px;
height: 50px;
}
#customDiv2 {
margin-top: 10px;
width: 60px;
height: 50px;
}
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
I got a problem with my DIV partition. I want this:
But i found no solution. Can anybody help me?
With this solution, the all container are on the left and not centered.
#logo-text{
margin: 0 auto;
width: 600px;
float: left;
}
#image{
float: right;
}
Although you have not given any examples of what you have tried, i'd like to give you this example:
http://jsfiddle.net/LRffh/
<div id="container">
<div id="lineLeft">
<div id="boxOne">box one</div>
<div id="boxTwo">box two</div>
</div>
<div id="lineRight">
<div id="image">image</div>
</div>
<div class="clear"></div>
</div>
CSS
#container {
width: 1000px;
min-height: 1px;
background: red;
padding: 20px;
}
#lineLeft, #lineRight {
float: left;
width: 450px;
padding: 20px;
background: grey;
}
#lineLeft {
margin-right: 20px;
}
#boxOne, #boxTwo, #image {
background: white;
width: 100%;
min-height: 1px;
}
#lineLeft div, #lineRight div {
margin-bottom: 10px;
}
.clear {
clear: both;
}
HTML:
<div class='continer'>
<div class='logo'></div>
<div class='image'></div>
<div class='text'></div>
</div>
CSS:
.continer {
width:500px;
padding:10px;
background:red;
height:400px;
}
.logo {
width:200px;
padding:10px;
background:#ddd;
height:150px;
float:left;
margin:10px;
}
.text {
width:200px;
padding:10px;
background:#ddd;
height:150px;
float:left;
margin:10px;
}
.image {
width:200px;
padding:10px;
background:#ddd;
height:340px;
float:right;
margin:10px;
}
fiddle
<style>
#wrapper
{
margin:0px auto;
padding:0px;
width:1000px;
}
#side
{
margin:0px ;
padding:0px;
width:350px;
height:500px;
float:left;
}
#first
{
margin:0px ;
padding:0px;
width:350px;
height:300px;
background-color:red;
}
#Second
{
margin:0px ;
padding:0px;
width:350px;
height:300px;
background-color:blue;
}
#content
{
margin:0px ;
padding:0px;
width:650px;
height:600px;
float:right;
background-color:green;
}
</style>
<div id="wrapper">
<div id="side">
<div id="first"></div>
<div id="Second"></div>
</div>
<div id="content">
</div>
</div>
hope this helps
http://jsfiddle.net/LSsMc/48/
Here's another take on the problem
HTML
<div class='table'>
<div class='cell'>
<div class='table'>
<div class='row'>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
</div>
</div>
</div>
<div class='cell'></div>
</div>
CSS
html, body{
width:100%;
height:100%;
padding:0;
margin:0;
}
body{
position:fixed;
}
.table{
display:table;
width:100%;
height:100%;
}
.cell{
display:table-cell;
border:1px solid grey;
width:50%;
}
.row{
display:table-row;
border:1px solid grey;
}
You need to create a container class for example who contains all the childs elements, to center the content.
html part :
<div class="container">
<div id="left">
<div id="logo-text"></div>
<div id="text"></div>
</div>
<div id="right">
<div id="image"></div>
</div>
css part :
.container {
background-color: red;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
/* Left part */
#left {
float: left;
padding: 20px;
}
#logo-text {
background-color: darkgrey;
width: 300px;
height: 300px;
}
#text {
background-color: darkgrey;
width: 300px;
height: 300px;
}
/* Right part */
#right {
float: right;
padding: 20px;
}
#image {
padding: 20px;
background-color: darkgrey;
width: 300px;
height: 300px;
}
jsfiddle http://jsfiddle.net/LSZfH/1/
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*#import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
http://jsfiddle.net/kLMtb/
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
There are 2 ways I know of to achieve equal height columns.
1) CSS tables
FIDDLE
Markup:
<div id="header">
<p>This is the header.</p>
</div>
<div class="wpr">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
<div id="contentliquid">
<p>Some content</p>
</div>
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footer">
<p>This is the footer.</p>
</div>
CSS
#header {
height: 100px;
background: orange;
}
.wpr
{
display:table;
}
#leftcolumn
{
width: 200px;
background: aqua;
display:table-cell;
}
#rightcolumn
{
width: 200px;
background: pink;
display:table-cell;
}
#contentliquid {
background: yellow;
overflow:hidden;
display:table-cell;
}
#footer
{
clear:both;
background: green;
}
2) Faux columns
Requires a background image with repeat-y (Read the above article).
Something like this:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
Sorry, just can't get this'
Here: http://www.crownoilfield.com/ it looks as I want, except that for a browser window below 1040px, where the top logo floats below the company name.
<div id="top_wide">
<div id="crownlogo"><img name="crown_logo6p32" src="images/crown_logo6p32.gif" >
</div>
<div id="top">
<div id="logo"> <img src="images/crown_oilfield_svc_4.png" ></div>
#top_wide {
color:#474327;
font-size:36px;
}
#crownlogo {
float:left;
padding:0px;
padding-left:5px;
display: table-cell;
}
#crownlogo img {
margin:0;
}
#top {
position:relative;
height:82px;
width:1040px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
display: table-cell;
vertical-align:middle;
display: inline-block;
display: table;
}
#logo {
width:620px;
float:left;
color:#474327;
display: table-cell;
vertical-align:middle;
font-size:xx-large;
margin-top:20px;
margin-left:-77px;
}
Thanks,
ed
try this:
#top {
position: relative;
height: 82px;
width: 1040px;
background-repeat: no-repeat;
display: block;
margin-left: 165px;
clear: right;
}
#logo {
width: 620px;
float: left;
color: #474327;
vertical-align: middle;
font-size: xx-large;
margin-top: 20px;
}
I'm having some difficulties in setting up a sticky footer in my css layout. I've been trying to go with the idea from http://www.cssstickyfooter.com/ but the footer doesn't stay at the bottom of the page if the content in the divs isn't high enough.
The css file:
* {
margin:0;
padding:0;
}
body {
height:100%;
margin:0px;
padding:0px;
}
#wrap {
min-height: 100%;
}
#container {
overflow:auto;
padding-bottom: 150px;
text-align:left;
width:800px;
margin:auto;
}
#header {
height:240px;
margin-top:20px;
}
#navigation {
float:left;
width:800px;
margin-top:20px;
}
#content-container {
float:left;
width: 800px;
}
#left {
clear:left;
float:left:
width:480px;
height: auto;
margin: 20px 0px 20px 0px;
padding: 20px 10px 20px 10px;
}
#right {
float:right;
width:275px;
height:auto;
margin: 20px 0px 20px 0px;
padding: 20px 10px 20px 10px;
}
#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}
#columns {
width:800px;
height:150px;
margin:auto;
}
#colleft {
float:left;
width:400px;
height:150px;
}
#colright {
float:right;
position:relative;
width:260px;
height:150px;
}
The html file:
<div id="wrap">
<div id="container">
<div id="header"></div>
<div id="navigation">
<div id="lang"></div>
</div>
<div id="content-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
<div id="footer">
<div id="columns">
<div id="colleft"></div>
<div id="colright"></div>
</div>
</div>
I believe you are missing html { height: 100%; } from your CSS.
Have you considered using position: fixed?
#footer { position: fixed; bottom: 0px; height:150px; }
The reason your example is not working is because your #footer is inside the #wrap, using that CSS the #footer must be outside of the wrap, as it is the wrap which is setting the min-height to 100%, and the #footer is being pulled upwards using the negative margin.
The html tag also needs a height of 100% to work.
So to recap, #footer can't be nested, and html needs height: 100%;
Example here --- http://jsfiddle.net/CK6nt/
Hope that helps! Laurie
In your footer class:
#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}
Change position: relative; to position:fixed so the class should look like this:
#footer {
position: fixed;
clear:both;
height:150px;
margin-top: -150px;
}
Everything seems fine to me, you just have to add position :absolute so the footer placed out of normal document flow and bottom:0 will help you to bring the footer down the page.
#footer {
position:absolute;
bottom:0;
}