body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding:10px;
}
#leftside {
width:200px;
float:left;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div id="leftside">left side</div>
<div id="content">content</div>
<div id="footer">footer</div>
how it looks:
My Problem:
See the red arrow in the picture the #content goes over the #leftside I want the #content to start after #leftside how can I do this? Also I wand #leftside and #content to always be the same height, I can not set fixed height because thre can be a lot of stuff in content and it might be long and I want my #left side to last until #content ends and #footer begins is it possible to do so? Any help appreciated!
you can do it by js like this
<script>
var content=document.getElementById('content').style.height;
var leftside=document.getElementById('leftside').style.height;
if(left>right)
{
document.getElementById('content').style.height=leftside;
}
else
{
document.getElementById('leftside').style.height=content;
}
If you don't care for IE6 and IE7 users, simply use display: table-cell for your divs:
check here
Note the use of wrapper with display: table.
For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.
One way of keeping the sidebar the same height as the content is to display them as table-cell. This way the two cells will always be the same height.
Using your code above, I have added a few extra lines of CSS and wrapped the main content in a div wrapper.
body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding: 10px;
}
#leftside {
width: 200px;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
.main-wrap {
display: table;
width: 100%;
min-height: 500px;
}
#leftside,
#content {
display: table-cell;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div class="main-wrap">
<div id="leftside">left side</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
You could also look at CSS flexbox
Related
I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it.
So, I've got four boxes arranged in a container:
div {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
box-sizing: content-box;
height: 600px;
width: 600px;
margin: 100px auto;
border: 2px solid gray;
}
.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 300px;
height: 300px;
padding: 0px;
}
.c {
background-color: cyan;
}
.y {
background-color: yellow;
}
.m {
background-color: magenta;
}
.k {
background-color: black;
}
<div class="wrapper">
<div class="box-container">
<div class="box c"></div>
<div class="box y"></div>
<div class="box m"></div>
<div class="box k"></div>
</div>
</div>
I've applied box-sizing: border-box; to the divs, but for some reason padding is having no effect at all. If I use margin then it makes the divs too big for the wrapper, and they move position.
What am I missing here?
Thanks in advance
Jamie
Your HTML & CSS is correct. If you need padding on all the .c .m .y .k boxes, then use
.box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #000; //border also works
}
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.