I have this page: http://jsfiddle.net/minitech/yU3aj/show/
If you look in the source, the CSS defines that the <header> should have side padding of 135px on each side, and the content should have 135px margin on each side. Why does the content end up having double that in spacing?
It doesn't. You're floating elements in the <header> and not clearing them.
Add clear: both; to your styles for the content div and it will move below the header and to the left.
It looks fine on my screen (Firefox 5.0)
Though I've read that some old IE versions have a problem called double margin
Also make sure to put a clearfix div after those two child elements in <header>:
<header>
<div id="notifications" class="left">notifications</div>
<div class="right">
<span class="dropdown">▾</span> username
</div>
<div style="clear: both;"></div>
</header>
EDIT: after checking out your screenshot it's obvious that you're missing that clearing div and the content below "floats after" your notifications box. Usually it is considered to be good practice to put a clearing element at the end of the floated elements, this way forcing the container to expand and "cover" all the contained elements.
Related
I have a relatively small problem here, it doesnt appear in Chrome though.
I have 2 divs at 50% width of their container, one is floated to the left, the other floated to the right. One contains some text, and the other contains nothing but an image which has a max-width: 100% applied to it by default. But still, the image is overflowing to the left outside of the divs boundaries. How to fix?
http://jsfiddle.net/Pv5Cb/ - I am not sure if this will give you an idea about what is happening but still.
P.S. I am using some snippets from animate.css, but I doubt that this is the problem.
HTML:
<div class="content-project-left">
<h1>heading one</h1>
<p>paragraph</p>
</div>
<div class="content-project-right">
<div>
<a>
<img src="img/img.jpg" alt=""/>
</a>
</div>
</div>
Fixed it myself.
So it turned out that besides the two 50% sides that are floated to the left and right respectfully, I gave the image within the floated right div a float: right...
float: *; removes an element from its natural document flow.
Removed it and everything is back to normal now.
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it