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.
Related
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:
I'm trying to accomplish a 3 column fluid layout with an additional span at the bottom that covers the last 2 columns. In addition, I need to use source ordering so that the middle column is actually the first column in the markup.
I have an example fiddle working in chrome/safari/firefox here: http://jsfiddle.net/66krg9cr/6/
<div class="container">
<div class="middle">
<div style="height: 400px;"></div>
</div>
<div class="left">
<div style="height: 600px;"></div>
</div>
<div class="right">
<div style="height: 200px;"></div>
</div>
<div class="bottom"></div>
</div>
* {
box-sizing: border-box;
}
.container {
max-width: 90%;
margin: auto;
overflow: hidden;
}
.middle {
width: 48.59114%;
float: left;
margin-left: 25.70443%; // push toward the middle
margin-right: 2.81771%;
background: #000;
}
.left {
background: #333;
margin-left: -77.11328%; // pull towards the left
width: 22.88672%;
float: left;
}
.right {
background: #666;
width: 22.88672%;
float: right;
height: 200px;
margin-bottom: -9999px; // equal height column trick
padding-bottom: 9999px;
}
.bottom {
background: #999;
width: 77.11328%; // width of the last two columns combined
float: right;
height: 200px;
}
Unfortunately, I can't get this working correctly with IE9. In that browser, the bottom 2 column span drops below the bottom of the first column instead of being beside it. It seems the problem is the source ordering. If I change the order in the HTML to match the visual layout, then IE behaves. It's like IE remembers the height of the first column before it's moved left, and lays out the bottom span according to that height.
I would move the HTML around and just solve the problem, but it's going through a rigorous accessibility/screen reader review, and i know I would get dinged for not having the main content at the top of the source code.
Also, content in these divs will be dynamic in production, so I can't rely on knowing the height of any one column.
Any help would be greatly appreciated.
Why not stray away from negative margins and break the whole thing up into wrappers like this:
HTML:
<div class="container">
<div class="container-main">
<div class="top">
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</div>
<div class="container-left">
<div class="left"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.container-main {
position: relative;
float: right;
width: 77%;
margin: 0;
min-height: 100%;
}
.container-left {
position: relative;
float: left;
width: 23%;
margin: 0;
min-height: 100%;
}
.container-main .top {
width: 100%;
min-height: 400px;
}
.container-main .top > div:first-child {
width: 70%;
float: left;
background: #000;
height: 400px;
}
.container-main .top > div:last-child {
background: #666;
width: 30%;
float: right;
height: 400px;
}
.container-main .bottom {
background: #999;
width: 100%;
height: 200px;
}
.container-left .left {
background: #333;
width: 100%;
height: 600px;
}
Your main content is still at the top. If you don't have to have everything in one wrapper then this may work, I can't test it in older IE versions though, but you can give it a try and let me know!
Here is a Fiddle of the above in action: http://jsfiddle.net/egxfnjzL/
...and just for fun, here is an exact copy of what you had: http://jsfiddle.net/whkqnnyg/
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:
I've looked at some questions posted here but everything seems overly complicated for what should be such a simple task? I just want a footer that stays fixed at the bottom of the screen no matter how long the page is vertically. Everything works, except I can't get the footer centered, it always aligns left..? Thanks! http://jsfiddle.net/n4xxj/
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
div {
width: 960px;
margin: auto;
}
#content {
background-color: beige;
border: 1px solid;
height: 1200px;
margin-top: 100px;
margin-bottom: 150px;
}
#footer {
background-color: lightgray;
border: solid 1px;
height: 100px;
position: fixed;
bottom: 0px;
}
Update your HTML to wrap in a wrapper div
<div>
<div id="content"></div>
<div id="footer"></div>
</div>
DEMO
Here you go, you will need to encapsulate the interior div's into a big #container div and add to it margin: 0 auto; to align it.
Please note for a complete fix you should also add this (it's a simple IE fix):
body { text-align: center; }
#container { text-align: left; margin: 0 auto; }
And of course the #footer will need to have width: 100%;
Also the fiddle:
http://jsfiddle.net/n4xxj/3/
I'm trying to build a liquid layout with two columns and a fixed footer at the bottom. I already take some help here, and I have one example above.
http://jsfiddle.net/kpDDM/18/
The problem on my example is that it has a fixed height. When I move to 100% heigh on my content div, the content collaps.
Do you need something like this : http://jsfiddle.net/kpDDM/44/
HTML
<div class="all">
<div class="content">
<div class="left"> </div>
<div class="right"> </div>
</div>
<div class="footer"></div>
</div>
CSS
.all {
position: relative;
height: 100%;
width: 100%;
}
body,html{
height:100%;
}
.content {
display:inline-block;
height: 90%;
width: 100%;
}
.left {
display: inline-block;
float: left;
width: 60%;
height: 100%;
background-color: red;
}
.right {
display:inline-block;
float: left;
width: 40%;
height: 100%;
background-color: blue;
}
.footer {
display: inline-block;
width: 100%;
height: 10%;
background-color: green;
}
Explanation
The problem is that the body tag does not have 100% itself. You have to assign that to body and then it'll work. In the above example I assumed that the content + footer share 100% of the height. 90% + 10%