I have been struggling with this for awhile now, and I can't seem to find any solution.
I have a frame, a top box, a left box and a right box and a middle box containing the last two.
I want these to be the height of the frame minus the height of the top box. This would result in the frame being filled, nothing more and nothing left.
What is wrong with my current code, and what would be a proper way to achieve this?
Here's the code:
<html>
<head>
<style type="text/css">
#frame {
width: 800px;
min-height: 500px;
border: 1px solid black;
}
#top {
width: 800px;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 800px;
height: 100%;
float: left;
}
#left {
width: 200px;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 600px;
height: 100%;
float: left;
background-color: #99BC99;
}
</style>
</head>
<body>
<div id="frame">
<div id="top">Top</div>
<div id="middle">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
</body>
</html>
You can't specify a 100% height unless you explicitly set the parent's height. The reason is that the parent normally expands in height to fit its children, and you need to specify an exact height so that the parent knows what its height is in time for its children to need it.
That said, there are a number of ways of achieving a similar effect. For instance if one div is normally taller than the other then you can use absolute positioning to stretch the second div to the same height. Or if you're really desperate then you can use a table.
Try using proportions instead of exact pixels.
#frame {
width: 80%;
min-height: 500px;
border: 1px solid black;
margin-right:auto;
margin-left:auto;
}
#top {
width: 100%;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 100%;
height: 100%;
float: left;
}
#left {
width: 33%;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 66%;
height: 100%;
float: left;
background-color: #99BC99;
}
jsFiddle
Here's a screenshot of your demo with the updated CSS:
Related
I have problem setting layout because one of my child divs makes goes out of it's parent div.
I have: header with 10% height, container with height 90%, and inside one 'div1' with height set to 90% and margin-top set to 10%. If I remove margin-top everything is ok, if not it goes out of parent size creating scrolls etc. (I want div1 height set, I dont need height set to auto etc.)
JsFiddle: https://jsfiddle.net/5q9vh93n/
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
CSS:
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%;
}
#header
{
background-color: blue;
height: 10%;
}
#container
{
width: 100%;
height: 90%;
background-color: gray;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-top: 10%;
margin-left: 1.5%;
height: 90%;
}
#div2 {
background-color: green;
float: right;
width: 100px;
width: 43.17%;
margin-right: 3.6%;
}
Use Transform here is a demo
#div1 {
background-color: red;
float: left;
width: 15.67%;
transform: translateY(10%);
margin-left: 1.5%;
height: 90%;
}
you should use position: absolute; and change margin-top to top , margin-left to left. So css of #div as follow:
#div1 {
position: absolute;
background-color: red;
float: left;
width: 15.67%;
top: 10%;
left: 1.5%;
height: 90%;
}
I was really surprised when I've discovered this, but vertical padding and margin are relative to the parent's width, not height.
To solve your problem, you can use the top property instead, which is relative to the parent's height, as you expect.
So, just change your code to this, and it'll work.
#div1 {
top: 10%;
position: relative;
}
JSFiddle: https://jsfiddle.net/5q9vh93n/2/
Hope it helps!
A simple problem today but can't seem to find the solution. I have four divs - I would like #down to be placed directly below #up, but for the life of my can't figure it out. Here is my CSS and HTML.
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
Elements must remain floated left.
maybe try with an additional div to get both up and down together?
<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>
And you will changed your css to :
up_down{
width: 33.3%;
height: 200px;
}
#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}
Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically.
As #isherwoord says in the first comment, wrap div#up and div#down together in another div, forexample div#column
(I hope you don't mind the HAML way of writing HTML.)
div#column
div#up
div#down
div#middle
div#right
If you know the heights/widths you can just set the top position of #down with position:relative;top:-100px; to pull it back up.
Example:
#up {
width: 33.3%;
height: 100px;
background: #CCCCCC;
float: left;
}
#down {
width: 33.3%;
height: 100px;
background: #999999;
float: left;
position:relative;
top:-100px;
}
#mid {
width: 33.3%;
height: 200px;
background: #999999;
float: left;
}
#right {
width: 33.3%;
height: 200px;
background: #CCCCCC;
float: left;
}
<div id="up"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="down"></div>
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});
This is difficult for me to ask.
In short: my div overlaps (gets outside the table). I want the table to be sized according to the div.
When I'm trying to add a footer, the content overlaps it. Here is the code:
Here is the page: page
the .middle css class sets the height of the center content to 25px The footer is therefore positioned related to the menu table content on the left.
If you remove the 25px from the css class the div should work as you expect
Ok I will suggest you rewrite your site because it's total mess, use my template for starters:
<div class="wrap">
<div class="header"></div>
<div class="body">
<div class="left-side"></div>
<div class="center"></div>
<div class="right-side"></div>
</div>
<div class="footer"></div>
</div>
And css:
.wrap{
width: 400px;
height: 500px;
margin: 0 auto;
}
.header{
width: 100%;
height: 50px;
background-color: #dddddd;
}
.body{
width: 100%;
height: 350px;
}
.left-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.center{
position: relative;
float: left;
width: 60%;
height: 100%;
background-color: #cccccc;
}
.right-side{
position: relative;
float: left;
width: 20%;
height: 100%;
background-color: #eeeeee;
}
.footer{
width: 100%;
height: 100px;
background-color: #dddddd;
}
Here is live example in jsFiddle
well, #Arturas.. I kinda agree with #skmasq for your website. I think it'll be better if you're not using table for the layout. but, if still want to use your current website source code, try to delete the .middle's height property. because you set it fixed 25px, but the content is overload, that's why it's overlapping.