Ok, I have the following layout/CSS:
div#wrap {
margin-left: auto;
margin-right: auto;
position: relative;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
display: inline;
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
float: left;
width: 100%;
}
with:
<div id="site">
<div id="wrap">
<div id="header"></div>
<div id="blog"></div>
</div>
</div>
So, site covers window, 'wrap' is fixed width and is centered and 'header' and 'blog' are inside 'wrap' with defined width.
The problem is as usual with IE6. 'blog' is shown under the 'header'. So it seems that float and/or margin does not work.
It seems that it's not a double margin float bug, at least in DebugBar I see correct margins, but also there are some offsets (50px for header), which I don't know what it is, actually. Anyway, i tried to add 'display: inline' to both 'header' and 'blog', and it does not help.
I don't have ie7 to see, but it does show correctly in ie8.
I went through several tutorials on floating bugs for ie6, but could not find a solution for my problem (or i might have missed it).
Any ideas how to 'heal' it without adding extra div's (i hope it's possible with css, like with doublemargin bug)
p/s/ total width of divs with margin is 1345 < 1400.
EDIT1:
the only thing that is strange is 'wrap' has 0 height.
EDIT1: the only thing that is strange is 'wrap' has 0 height.
Please read http://www.quirksmode.org/css/clearing.html . However, the described issue doesn't appear in IE6 because of another bug; floats are automatically cleared.
Also, to prevent double-margin bug, make sure you define display:inline for all floating elements. Avoid adding display: inline to #wrap, it'll cause the previous issue (#blog appearing under #header).
edit: I was able to reproduce the issue at reznikdavydov.com. Inside #header, there is a <div class=menu> which has width: 300px set. The bug in IE6 causes that the wrapper (#header) is incorrectly expanded so that div.menu cannot overflow out of it. This is the reason why #header and #blog cannot fit side by side: the computed with of #header is 135px in modern browser, but 300px in IE6. The solution is to remove the width:300px rule from .menu selector.
it seems you have unneeded CSS, i would start from here and see if it works
div#wrap {
margin:0 auto;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
width: 100%;
}
Related
I've written up a very basic HTML and CSS page to test out my responsive web design skills but the calculation of the padding is going wrong and I can't figure out why, any help from people would be greatly appreciated.
Below I have added my code for you to see. I have one 'main' with a 'section' and an 'aside' in it. Inside both are a box of two different sizes. I calculated the size and margin of the boxes ok but the padding won't work properly. I calculated the padding by target/context=result, which in this case for the first box is 25px padding / 500px = 0.05 (5%), and for the second box is 25px/300px= 0.08333333 (8.333333%).
However this does not cause a 25px padding but instead creates a much bigger one. When I look at the Google Chrome Developer Tool it tells me that the padding for the first box is now 56.875px and the second box is 94.797px.
I've been trying to solve this for sometime now trying different things but can't manage to figure it out.
Any help on this would be greatly appreciated. Code is below.
body, section, aside, p {
margin: 0;
padding: 0;
}
main {
width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */
background-color: lightgreen;
min-height: 1000px;
margin: 0 auto;
}
section {
height: 500px;
width: 44.067133%; /* 500/1137.590 */
background-color: green;
float: left;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 5%; / 25/500 */
}
aside {
height: 300px;
width: 26.434279%; /* 300/1137.590 */
background-color: blue;
float: right;
margin: 04.398736%; /* 50.031/1137.590 */
padding: 8.3333333%; /* 25/300 */
color: lightblue;
}
<body>
<main>
<section class="box-green">
<p>This is a green box</p>
</section>
<aside class="box-blue">
<p>This is a blue box</p>
</aside>
</main>
</body>
When you calculate padding in percentage, that amount is calculated by the width of the containing block, not the height.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Padding, when given in percents, is based on the containing element not the height of the element itself.
Although this is not the correct way to write a responsive code but just to make you understand the padding % is not determined from the div size but its determined from the screen size. Also the margin you are using 4.398736% is adding on both left and right side of both the divs. Plus the padding of 5% on both side of .section and padding of 8.33333% on both side of .aside. its making the total size to 115.96555%.
For your understanding if you want both the divs (section and aside) to align side by side. Use the below written css style for both of them.
.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}
.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}
Hope this helps..
I have literally been trying every clearfix hack that I could find for hours and nothing is working. The paving photo at the bottom right always goes outside the content container. This is currently what I have:
.content {
margin: -10px auto 10px;
padding: 10px;
}
#paving_photo {
float: right;
margin: 10px 0 10px 10px;
border: 2px solid black;
width: 300px;
height: 300px;
}
.content:after {
content: "";
display: block;
height: 0;
clear: both;
}
This is the page: website template
I have tried the clearfix hack and micro hack. I have added the clearfix to the content class. I have tried overflow: hidden|auto. I have tried adding the clear: both after the floating element. Literally nothing as worked.
I'm at my wits end. Please help!
Thanks!
It seems fine on FF on my end, with the exception being when the screen height is less than about 791px. I think this is due to .outercontainer height is set to height:100%.
I am working on this site: https://dev.notevenpast.org/brian-levack-possession-and-exorcism/
In this page I am attempting to center an image within a div with an id of monthly-feature-banner. Here are the stylings for the banner and the image:
#monthly-feature-banner {
width: 100%;
}
#monthly-feature-banner img {
display: block;
margin: 0 auto;
}
Oddly, though, in both Chrome and FF the image margins are not equal.
Question: Why is this happening?
Question: What can I do to fix it?
EDIT: The answer below suggesting text-align: center; had the same issue as margin: 0 auto; It should work, but it doesn't. Also, the box-sizing fix helps if I remove it from the entire page, but it has side effects that make it impractical.
A comment below from #Alohi correctly pointed out that adding clear: left; to the containing div along with the margin: 0 auto; has the desired effect. I will accept the first answer that contains that information.
Remove #monthly-feature-banner img and add text-align: center to #monthly-feature-banner
Unless you intend to modify #monthly-feature-banner to something else the width will already be 100%, so width: 100%; or any display:block; styles you have are useless, a div itself is a block.
In short:
#monthly-feature-banner {
text-align: center;
}
Fiddle: http://jsfiddle.net/Gs6rG/
If the image continues to be pushed to the right you could try adding clear: left;, which disallows floating elements on the left.
Try this
#monthly-feature-banner {
width: 100%;
margin: 0 auto;
}
I have a footer content that is overlapping the wrapper div in my css and html, when I changed height to auto it didnt work.
below is an example of the page I'm working on.
Wrapper CSS
#wrapper {
width: 1030px;
height: 600px;
margin: 20px auto auto auto;
padding: 0;
background: url(wrapper.png);
}
Footer CSS
.footer{
width: 1000px;
padding: 60px 0 0 30px;
height: auto;
float: right;
clear: both;
background: url(footer_bg.gif) no-repeat top right;
text-align: center;
}
Example
You need to clear your floats in the .content_left and content_right columns and remove the height associated with your #wrapper:
http://jsfiddle.net/L6acE/3/
There's a few different methods for clearing floats. I went with a real simple method of just adding a <div style="clear:both;"> after both columns as discussed here:
http://css-tricks.com/the-how-and-why-of-clearing-floats/
But I'd generally use a clearfix method discussed here:
http://nicolasgallagher.com/micro-clearfix-hack/
I also added in some word-wrap:break-word CSS for your left column to wrap all your dummy content.
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?