1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I need something very basic explained about CSS

Discussion in 'CSS' started by tayiper, Oct 10, 2007.

  1. #1
    I was once again experimenting basically because I want to futhrer understand some CSS-related things/principles; paritially (i.e. for some of them) I've already forgotten them, meaning that once I did understand them, and paritially I've never understood them ...


    And it's all about the two possible ways of positioning the text to left/right side: 1. with "float:left;" & "float:right;", and 2. with position property with value "absolute" (to use value relative for this property it screws it in this case; also see below) and "left:0;" & "right:0;" respectively.


    The first example code:

    <div style="float:left; width:120px; height:240px;">text<div>
    <div style="float:right; width:120px; height:240px;">text<div>
    Code (markup):

    The second example code:

    <div style="position:absolute; left:0; width:120px; height:240px;">text<div>
    <div style="position:absolute; right:0; width:120px; height:240px;">text<div>
    Code (markup):
    Though IIRC, it's not posible to float two images (for instance) like that, i.e. compare to floated text in this example the two images would be displayed one after another (meaning one above the other), in fact, it's quite similar to the example with positioning of text above if I use relative value instead of absolute.


    So anyway, I am curious: am I right that there are basically two (mentioned above) possible ways of positioning the text (well, blocks of text to be precise) to left/right so that they are place beside each other??!


    P.S. - In this experimenting I was looking at the code of "Three Column with Header & Footer" template; IIRC this is the link: 3c-hd-ft-flex.htm to the template that I've uploaded to my FTP, compare to the code of my own general personal website. And btw., I also describe a problem that I had back then with "three column" design in this note on "website.html" page of my oldest computing-related website.


    tayiper
     
    tayiper, Oct 10, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hmm, you CAN float two things like images left and right. Or you could float them both left.

    Floats take boxes (which normally have a "newline" after them, so they stack atop each other) and makes them stack alongside each other--- but only so long as there is room. If these boxes have say huge margins, then the margins will be taking up "space" and preventing another box from coming up alongside it. Continuing to add floats will eventually make them wrap down to the next line. If you have a very huge container with lots of little floats, making the browser window larger or smaller will show the floats doing what text does in word processing- filling the space as far as it can and the rest wrapping beneath.

    Absolute positioning is funky. I think of a bathtub and I think maybe other people here do too but everyone seems different about which part sits on the bottom and what floats on the water. The absolutes are painted on the bottom of the tub. No matter what's going on with the water, the boxes painted (or sitting) on the tub bottom will never move. They are not part of the water at all.

    Or, think of your computer monitor, and absolutes are pieces of paper you have taped to the monitor. You can see how this could be a problem when you resize the window or see it in different resolutions. This is the reason why most everybody says don't use ab pos for big boxes. Better to have it inside a box where something (like an image) should always always always no matter what, sit in the, say, upper right hand corner. Something, usually small, that you would want taped on the person's monitor if you could.

    Remember that images could be set side by side without floats. I forget why, but they act like blocks but are actually inline elements. So you could change their display to "inline" in the css without floats and I would think that would work. Remember also that anything normally inline (text, spans, anchors) are, mm, inline.
     
    Stomme poes, Oct 10, 2007 IP
    tayiper likes this.
  3. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #3
    Hey Stomme poes, thanks much for your reply. Also, I think that now I finally understand a bit more about all this; if you're maybe interested, see the somehow related Floating: can you please explain something to me!! thread that I opened today here on DP forums.

    Exactly, that's precisely what I was experiencing, and that's why I wrote (in that thread linked above), quoting: "And surely, after testing the code a bit (namely, trying out various values for "padding", "height", "width" properties), the layout is exactly as I intended it to be ...", meaning that since my website's main "wrap" div has 800px width, the two other divs need to have a width, where both summed together give 800px. However, since I use "padding" and "margin" on some of them, this gives additional few pixels, and so when I was testing and the width alltogether was above 800, then one of the boxes/blocks (i.e. the one that should be floated to right) was moved below the other one (i.e. the one that is floated to left)


    tayiper
     
    tayiper, Oct 11, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Actually, what floats really do is remove the floated element from the content flow. In other words, as far as the flow control is concerned, the floated element takes up no space. Foir example, if you had three boxes on top of each other and to the left of the page, if I floated the first top box to the left, what would actually happen is that the second box below it will now bump up to the top and place itself underneath the floated box. So both boxes would now occupy the same space with the floated box on top of the no floated second box (by on top, I mean layered on top to where you can't see the second box). The second box doesn't even know the first was in there anymore. To prevent this, you need to float the second box, and then the third, etc...etc... Then, there is also the tricky part of taking up space. Since you think that the floated element takes up space, you would expect it to push it's containing box outward. But it doesn't, because remember, it's no longer part of the flow control content. So, for instance, if you have text floated around a box, it would be the text driving the height of the larger containing box, not the inner floated box . If your text is not as tall as your inner box, then you can either hard code the height of the containing box to make it suitable for the smaller box, or you can clear the float, in the code after it and then, the section will be seen as having that inner in it's content and will use the box to push out the container box. <div style= "clear:both;"></div>
     
    Arnold9000, Oct 12, 2007 IP
    tayiper likes this.
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    So, the floats are on top of the water, while the main page is in the middle of the water and absolutes are at the bottom. Floating on the top, floats can grow in size and won't change the page underneath them, as floats within a container are not actually inside that container.
     
    Stomme poes, Oct 14, 2007 IP