I think I need some more assistance with the concept of floating. This time my question revolves around floating two or more elements to the left. How does this work exactly? I know that a float lifts the children of the element off the page and moves them all the way to the left. All other elements respond by wrapping around... but how does the concept of floating two elements apply to this?
Here is what I understand: Say I have two DIVs, a and b. Float a to left, b's content will wrap around it... but if I float b to the left... How does the content respond to a?
EDIT: Here is something I was messing around with to see if I could understand this concept.
The first DIV has an inline style that floats it to the left... But see how the second DIV with no inline style margin is all wacky?... It doesn't show this wacky margin when the DIV is floated to the left also.
Edit: I know inline styles are bad... I was just using them to showcase an example here.
Here's a series of very comprehensive tutorials: Floatutorial. By following the tutorials it becomes very clear how floating works.
To answer your specific question: When you have two elements with float:left, then the surrounding content will wrap the second element, then the first if there's room left.
Example: http://jsfiddle.net/ak736
Related
I need a little bit of help disciplining my HTML. It seems to be acting up.
Anyway, the content area of a page I'm working on has two columns. To get the multi-column look, I'm not using one containing div for each column because some of the "rows" in the column need to be lined up.
So instead, I'm basically using several "rows" with two inline divs per row -- one for left content, one for right. Most of them are working correctly..but for some reason, my last row isn't. No matter what, it will not listen to me when I give it a width.
Here's what the relevent HTML looks like:
<div id="mainContainer">
<div id="topBar"></div> //full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are inline
</div>
<div id="browseButtons"> //this is the "row" that is acting up
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are inline
</div>
</div>
In the mean time, what types of situations can cause a div to not listen to a width? I even went so far as to give every single child div inside litbrowse and vidbrowse1 the same width that they have, 450px, and no dice. All of the content above it, which has essentially the exact same structure, is working fine. The only difference, maybe, is that the "row" above the row in question is comprised of two floating divs.
Here is a jsfiddle showing the issue. The bottom two divs (Browse lit by category, browse vids by category) should be spaced out, but they're scrunching together because they won't take their 450px width.
The problem is that you are saying that .browseBtn is inline. Inline elements don't take widths, only block level elements do.
Using inline-block instead will do what you want. It is inline enough to make the divs side by side and block enough to allow you to specify the width.
See http://jsfiddle.net/abtFr/2/
SECOND EDIT - Others have responded saying to use display: inline-block instead of display: inline. inline-block is not compatible with IE7. HOWEVER, we can make it compatible by appending
zoom:1;
*display: inline;
to the element using inline-block. To make compatible with IE6, you need to specify a height, so add
_height: [yourheight]px;
The underscore will target IE6 only.
Alternatively you can float the elements left, in which case my original reply may be relevant.
EDIT - I responded without seeing the jsFiddle; this response can probably be largely ignored.
To answer your question, floating an element will cause it to be taken out of the normal layout. If a div is floated left inside another div, it will be placed to the far left of that container, but its dimensions will not be taken into account when sizing that container div; in other words, that container will act like there are no divs inside.
To fix this you need to place another (empty) div inside the container, after the floating divs, and assign the style "clear: both" to it so that it will take the floating divs into account when being positioned. In turn, the container div will see the last cleared div and resize to take it into account.
Alternatively, sometimes you can skip adding the cleared div inside the container, and just add the style "overflow: hidden" to the container itself. This is somewhat of a hack, but a pretty robust one as far as hacks go.
Hope this solves your problem; if not we'll have to wait for more information.
It's simple, yes, you have a div, but you define its display as inline (with .browseBtn definition). So it's not a block-element anymore and it doesn't listen to width definition.
I've corrected the fiddle, although it might have other side effect.
I have a bunch of anchor tags containing images and a h1 header. I have apllied the float element to allow them to layout in rows of 2. For some strange reason though, the milky way link is causing the next anchor to float right. If you swap the milky way with saturn, it works fine. I can't for the life of me figure out why. Can anyone explain this strange phenomenon to me?
Here's the jsfiddle for my page: http://jsfiddle.net/SVuQQ/
If you add clear:both to the Andromeda anchor it will fix the float issue. I set it up so you can just add the .clear class to any other anchors that might need it if you add more.
Explanation: An element with clear:both prevents elements to the left and right with floats from having an effect on the flow of the page layout. In this case, the milky way anchor float was having an adverse effect on the elements below. By adding clear:both to the Andromeda anchor, the Milky Way's float is no longer pushing down the rest of the elements.
Alternative Solution: The float issue is happening because you have anchor tags with different heights. They can't stack properly because one float is pushing down farther than the other. If you set the same height for all of them it would fix the issue without clear:both. jsfiddle.net/SVuQQ/7
I suggest try to set your #subject-content a-menu {height: auto}
and remove float:left at the same line (e.g #subject-content a-menu)
I'm currently working on a site with this design and layout for my main-content area:
http://img528.imageshack.us/img528/9483/screenshot20120429at124.png
However, I'm finding it a little difficult to write up the HTML and CSS using proper semantics.
Firstly, should I be using divs to split the left and right columns, or, HTML5 section tags with an aside tag for the picture?
Secondly, what is the best way to position each section or area?
And finally, with that being said, at the bottom of each content area there are 2 buttons that should be horizontally inline. What is the best way to go about achieving this considering the fact the the user of the site will later on be placing in their own text and both buttons should push or position themselves further down as more text is placed inside.
This jsfiddle is currently what's making it work...but, seems wrong?
http://jsfiddle.net/LGEKW/
Should those 2 buttons be in that current div, do I use position absolute, relative or floats … I have no idea. Any help on how you would go about doing this would be greatly appreciated.
If you are using <!doctype html> it's definitely better to use
semantic tags, because divs have NO semantic meaning at all.
To my mind the best way to position the elements is to use float
property
The buttons should be floated as well. Not absolutely positioned.
Thus they will be pushed down when the user adds more content. Try placing them after the content in the same wrapper
Drop your br tags after each paragraph. p elements are
block-level - so you can use margin-bottom property to push the
next p down a bit
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.