I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.
Related
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
My nav bar correctly links to my 'work' section, but if I click ABOUT on the nav bar, it drops down to about 300px above the 'about' h2. I feel it may have to do with positions, displays? I can get the ABOUT anchored link to correctly go to the about section if I add
#about{
margin-top: 360px
}
Although this appears to be a poor patch on a larger problem with my construction. I've tried doing a lot of different things but I keep ending up with my work, about, and contact section starting to overlap into each other which I can't understand either. The divs dont seem to be stacking properly or something. ANY help is greatly appreciated.
http://wrobbins.me is the site. Thanks.
The link takes you exactly to where the about element is, it's just that the text in the element is pushed down by the job elements in the block above.
The problem is the jobwrap element. The floating elements inside it doesn't affect its size, so it has the height zero.
Add overflow:hidden to the #jobwrap style, and it will contain its children, and the about element will start below it.
When you use floats you should "clear" its parent or block you want to be below. Now your #jobwrap block have zero height and there is the problem with #about position. Use #about{cloar:both;} as hotfix and read more about floats and clearfix.
I'm attempting to get this menu working in IE7. I've squashed every bug but this one.
When you hover a list item, the UL's within the drawer that pops out won't float next to one another properly. If you look at the page in Chrome, that's how I was setting up the CSS before (display inline block, etc). That didn't work either so I tried floating them left.
Floating left fixed an issue I had with extra text-indent on the left of each li, but the ul's still will not float properly.
Does anyone have any ideas?
http://playground.willpracht.net/megaMenu.html
Redo your code to remove as many of the > selectors as you can. They are making everything much harder to deal with. It's like giving everything an id, and makes overriding things longer and longer and longer.
Honestly I would have sub-divs instead of just menus, because you're making the first li's look like headers but semantically making them no different from all the other links. Actual headers with links inside make more semantic sense. For example there's a link called tools and then the rest of the sibling links are... tools.
Anyway, when floating things, look at your widths. I see a lot of elements with no widths declared at all. In IE, with floats, this is important. I would set widths (they can be in em if you want) of the sub-divs, and then widths for the floating ul children inside. Their combined widths together should not equal 100%. For example, if a div is 140px wide, don't try two floated ul's inside each with widths of 70px, even though that should fit, and will in most browsers.
I have some example mega menus if you'd like to see, but there are many already out there and I don't believe I have one with floating ul's inside the submenu.
I have a quandary. I have an application where CSS seems to do what it is supposed to do, but does not show results as you would expect and I can find no solution to get the "expected" results. The issue is how content is flowed when there is a float element to the left of the content and the content styles use padding or margins.
In my application, users can enter text in a DIV. There may or may not be a float left element so that the div with the text can either be at the left of the body area or shifted to the right (i.e. after the floating element).
When there is no floating element, the text is fine with paragraphs (i.e. with divs and appropriate classes) that are left, indented, first line indented, or hanging.
The CSS for the paragraphs are:
.firstindent { text-indent:30px; }
.indent { padding-left:30px; }
.hanging { padding-left:30px; text-indent:-30px; }
However, when a a float left element is added, only the standard and first indent show properly. This is because padding, borders, and margins are outside the box model "content" and only items in the "content" area are adjusted for the float.
Floats. In the float model, a box is first laid out according to the normal flow, then >taken out of the flow and shifted to the left or right as far as possible. Content may
flow along the side of a float.
If you use Firefox with Firebug, you can highlight the divs and you will find that the padding is shown at the left edge, i.e. "underneath" the floating element, not adjusted to the right of the floating element.
As a result, the paragraphs with a float left element look like this:
(Note that the float element also effects the presentation of lists.)
So far, I have not been able to come up with a CSS solution that lets me set the main text contents and then have them properly display whether or not there is a float left element to the left.
I have posted a full HTML sample so please feel free to snag the source and see if you can find a solution! Sample Page
Thank you - I should have included the "what you expect". Here it is with the float left and the float left spacer.
To correct, set overflow: hidden on all your paragraph elements (and lists, etc.) See fiddle.
In CSS 2.1, how can I put different divs next to each others? I found that there is a property float and values left, right, none and inherit and I guess they allow me to put for example picture A left and picture B right. But how can I put a picture B below picture A, or for example such that pictures are 15 pixels below the navigation bar of the site?
Even after editing the question, I'm still not 100% sure what you are after. You are mentioning two images and how they are positioned relative to one another but it sounds like the problem is really that they are overlapping another part of the page. Floating an element will allow you to position an element and have the rest of its parent's content wrap around it, like a picture in a news article for example. You can also position divs side by side but that gets a little trickier.
Originally, you mentioned wanting to position one image below another and have those two move together, in which case you would wrap the images in a div and then float the div however you wanted.
In this updated question, it sounds like you would basically just want the images to appear below your page's navigation bar. Without knowing the details, I assume the images are overlapping your page header because they are floated and they are siblings (at the same level in the DOM tree) with the navigation bar's markup. You could do a couple things to fix that. First, you could give the images a margin-top value that's equal to the height of the navigation bar. But that's definitely a hack. Here's a better approach...
Without example HTML, it sounds like you really have two different parts of a page - a header/nav bar and the body of your page. If that's the case, then I would use a div for each. The images would presumably be wrapped in the body's div and no matter how you float them it within that body div, they shouldn't ever overlap the header's div. For example...
<body>
<div id="navigationHeader">
Navigation Option 1
Navigation Option 2
</div>
<div id="pageContent">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" />
Even though the image is floated left, it still won't overlap the page navigation header.
</div>
</body>
floats etc requires a fair bit of study ( not that it's a huge deal but a bit more complex than you might think ) .....
figure out the following
inline vs block elements ( you can change the default setting)
clearing divs
these will help too
http://css-tricks.com/all-about-floats/
http://css.maxdesign.com.au/floatutorial/
http://www.w3schools.com/Css/css_float.asp
http://www.positioniseverything.net/ordered-floats.html
reading your question again it looks like you might be finding that you need a clearing div beneath the two pictures ( this is non semantic by the way)