So i have my header setup fine. Then i have my body. What i want to happen is to have the body split (did that fine, no problem). then on the left side i have my navigation and the right side i have my main body content. My problem is if i use a float for the initial split how do i split the right side in half then? I want 3 sections overall. Left side, then leftRight and rightRight.
My question is, can i put a float inside something this is already floating? If so, then how? if not, then how can i split the right side of my body again?
Here is what i tried: http://people.eecs.ku.edu/~ageoffri/unavitSite/
Yes, you can put floating elements inside other floating elements.
As you discovered, your code has a misplaced div, so you aren't actually nesting your elements.
Related
Look at this image: http://i.stack.imgur.com/KZCXn.png
I'm using 'float:left' to align contents of my website grid-wise.
On the left side, the space between the two objects is 24px, whereas on the right side it's 10px. It is happening automatically because of using float. I don't want the spaces to be different on both sides if the boxes are of different heights. I want the alignment to be like facebook timeline.
You will need to use something like Masonry: http://masonry.desandro.com/. HTML/CSS can't do it by itself.
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
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
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.
I have created a page which has a container of 350px.
Now I have two sections, one on the left and the other on the right side.
Left content is fixed, whereas the right content is flexible to contain more text.
I have used float:left and float right for left and right positioning. And to get more text I use the word-wrap:break-word.
However, I have to use a div to include the clear class after every point.
Is there a smarter way to do this?
[EDIT] : I know this can be done using the <li> or <table> but I wanted to know if there was a way to get this structure using the div structure itself.
This makes my question easier to understand : http://jsfiddle.net/tKHkS/1/
You don't need the clearer div's
Just clear:both on the left questions.
Like this: http://jsfiddle.net/3H6Ue/