How would you make the main_content stretch to the header, footer, right and left side bar.
Just looking for a 3 column layout with header and footer. I've been searching and haven't found any examples that do this.
<style type="text/css">
#header
{
height:100px;
border: 1px solid blue;
}
#left_side_bar
{
border: 1px solid blue;
width: 100px;
float: left;
height: 300px;
}
#main_content
{
border: 1px solid green;
float: left;
width: ?;
height: ?;
}
#right_side_bar
{
border: 1px solid blue;
width:100px;
height: 300px;
float: right;
}
#footer
{
border: 1px solid blue;
clear:both;
height: 100px;
}
</style>
<div id="header"></div>
<div id="left_side_bar"></div>
<div id="main_content"></div>
<div id="right_side_bar"></div>
<div id="footer"></div>
Well, here is a demo with position:fixed, although there are plenty of sites out there which can generate the mark-up and CSS for you. For example the very nice CSS Layout Generator
CSS
#Header {
float: left;
clear: both;
width: 100%;
}
#Left_Side_Bar {
float: left;
width: 10%;
}
#Main_Content {
float: left;
width: 80%;
}
#Right_Side_Bar {
float: left;
width: 10%;
}
#Footer {
float: left;
clear: both;
width: 100%;
}
Here you can find example of most of the 3 column layouts (fixed, fluid, mixed...) -> CSS Layouts
Related
Having a little issue with floating and a responsive layout. I have a div container that has a left and right div container inside. The two have to be on the same "row" but when div container "RIGHT" is set to 100%, it moves it down to the next row. I have made a quick fiddle here.
http://jsfiddle.net/v5tnshjw/1/
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: 100%;
background-color: blue;
}
The box on the right needs to flow with the browser width but stay on the same line.
Any help or pointers would be great! Thanks in advance.
You could set the inner divs to display:table-cell with the parent as display:table and table-layout:fixed:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
display:table;
table-layout:fixed;
}
.leftBox {
display:table-cell;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
width:100%;
height: 50px;
display:table-cell;
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
You can also use the CSS3 calc() function :
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: calc(100% - 80px);
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
If the left box also needs to scale:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 20%;
}
.rightBox {
float: left;
height: 50px;
width: 80%;
background-color: blue;
}
I have full-width div with a background image in it. The background image has people in it and I'd like to show a tooltip when you hover over each person.
I don't think you can write image maps with % widths so I'm trying to do this with DIVs. Something like this:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
and Css something like this:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
Unfortunately depending on the size of the screen the divs won't line up with the people... What's the best way of solving this?
I posted the above code to cssdesk here:
http://cssdesk.com/vmZSD
Thanks!
Here is a FIDDLE that might help you.
CSS
.americangothic {
float: left;
width: 315px;
height: 384px;
background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
background-size: 315px 384px;
position: relative;
}
.changemediv1 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: red;
border: 3px solid gray;
}
.changemediv2 {
float: left;
width: 50px;
height: 50px;
margin-left: 20px;
background-color: blue;
border: 3px solid gray;
}
.face1:hover ~ .changemediv1 {
background-color: green;
}
.face2:hover ~ .changemediv2 {
background-color: green;
}
.face1 {
width: 80px;
height: 110px;
border: 0px solid red;
position: absolute;
top: 70px;
left: 35px;
}
.face2 {
width: 80px;
height: 130px;
border: 0px solid red;
position: absolute;
top: 30px;
left: 180px;
}
img {
width: 315px;
height: 384px;
}
Just remember that all the divs need to be in the same container.
I have the following code shown in this fiddle.
For the life of me I cannot get them to align the way I want them to. It is pretty easy to see where each div should be by looking at the code but here is some more help:
| topLeft | topRight | |
----------------------------------| right |
| bottomLeft | bottomRight | |
Please help me with this!
Ex 1. swapping the right positions in front of the left: http://jsfiddle.net/pTDEX/1/
html:
<div class="top">
<div class="topRight">
topRight
</div>
<div class="topLeft">
topLeft
</div>
</div>
A box floating right after a left floating box will be positioned below the box and then right.
Or ex 2. swapping the float: right for float:left: http://jsfiddle.net/pTDEX/3/
.topLeft {
background: green;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
float: left;
width: 100px;
height: 80px;
}
It'll float the right boxes left against the left boxes.
There are more possibilities but it's all about understanding what float does, play with it!
On a side-note, you can safely ditch display: inline when specifying fixed blocks.
I used absolute positioning on the subelements and relative positioning on your container, this is easy as long as you know the dimensions of your elements (in px or %)
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
position:relative;
}
.top {
background: purple;
position:absolute;
top:0;
left:0;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
width: 300px;
height: 80px;
position:absolute;
top:0;
left:0;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
position:absolute;
top:0;
left:300px;
}
.bottom {
background: black;
display: inline;
width: 400px;
height: 20px;
position:absolute;
top:80px;
left:0;
}
.BottomLeft {
background: blue;
display: inline;
width: 300px;
height: 20px;
position:absolute;
top:0;
left:0;
}
.bottomRight {
background: red;
display: inline;
width: 100px;
height: 20px;
position:absolute;
top:0;
right:0;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:400px;
}
Check out the updated fiddle:
http://jsfiddle.net/pTDEX/2/
(Note that the position relative attribute on the container is just so that a) absolutely positioned elements within it will position relative to the container. b) it respects your margin 0 auto; (which it wouldn't if you gave it position:absolute)
You main problem in your html code, just an order of div tag Right
<div class="container">
<div class="right">right</div> <!-- replaced top with right -->
<!-- your mistake was fixed here -->
<div class="top'">
<div class="topRight">topRight</div>
<div class="topLeft">topLeft</div>
</div>
<div class="bottom">
<div class="bottomRight">bottomRight</div>
<div class="bottomLeft">BottomLeft</div>
</div>
</div>
Your Css style
//Css Style
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
}
.top {
background: purple;
float: left;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
}
.bottom {
background: black;
display: inline;
float: left;
width: 400px;
height: 20px;
}
.BottomLeft {
background: blue;
display: inline;
float: left;
width: 300px;
height: 20px;
}
.bottomRight {
background: red;
display: inline;
float: right;
width: 100px;
height: 20px;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
}
I'm trying to set auto width for left and right divs so that they are always attached to centered div. My example below uses width: 20%; for left and right divs which should be dynamic. How can I accomplish that?
I looked into these (1, 2, 3) example for ideas but couldn't solve my problem. 3rd is what I want but it didn't work in all browsers.
Feel free to change whole code below as I'm open for better solutions but the center div has to be 850px.
Thanks
<style>
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: 20%;
height: 200px;
background: #cccccc;
}
#center
{
float: left;
width: 850px; /*compulsory*/
height: 200px;
background: #dddddd;
}
#right
{
float: right;
width: 20%;
height: 200px;
background: #eeeeee;
}
</style>
<div id="cover">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
If you really want to stick to the 850px for the middle, you will have to calculate the width of the entire document, thus using a little javascript : Fiddle
Here is the very basic javascript part.
function menuresize(){
var windowWidth = document.body.offsetWidth;
var menusSize = (windowWidth-850)/2;
if(menusSize<1){
document.querySelector('#left').style.display = 'none';
document.querySelector('#right').style.display = 'none';
}else{
document.querySelector('#left').style.width = menusSize+'px';
document.querySelector('#right').style.width = menusSize+'px';
document.querySelector('#left').style.display = 'block';
document.querySelector('#right').style.display = 'block';
}
}
menuresize();
window.onresize = function(e){menuresize();}
If the page is thinner or equal to 850px, the left and right menus disappear.
Add width to center div in percentage like
<style>
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: auto;
height: 200px;
background: #cccccc;
}
#center
{
float: left;
width: 850px; /*compulsory*/
height: 200px;
background: #dddddd;
}
#right
{
float: left;
width: auto;
height: 200px;
background: #eeeeee;
}
</style>
<div id="cover">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
</div>
see #Ence answer
now just add a new div inside "center" div and apply the class:
#middle{
width: 200px;
background: #f90;
margin:auto;
}
example:
http://jsfiddle.net/vSvTZ/
Here is the working DEMO
CSS
body
{
background: #333333;
}
*
{
margin: 0;
padding: 0;
}
#cover
{
float: left;
width: 100%;
min-width:1420px;
height: 200px;
background: #bababa;
}
#left
{
float: left;
width: 20%;
height: 200px;
background: #cccccc;
left:0
}
#center
{
float: left;
min-width:850px;
width: 60%;
height: 200px;
background: #dddddd;
}
#right
{
float: right;
width: 20%;
height: 200px;
background: #eeeeee;
right:0
}
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.