1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS help appreciated

Discussion in 'Off Topic' started by Renada, Sep 24, 2011.

  1. Renada

    Renada Active Member

    HI,

    Can anyone please take a look at this and tell me why the right hand column is putting the text at the bottom instead of the top?

    Much appreciated. :)

    Code:
    <html>
    <head>
    <style type="text/css">
    .box {
    background-color: #eee;
    border: 0px;
    border-style: solid;
    border-color: #800;
    padding: 5px;
    margin: 5px;
    width: 100%;
    height: 50px;
    }
    .text {
    display: inline;
    font-size: 12px;
    font-family: arial;
    color: #777;
    margin: 20px;
    width: 25%;
    vertical-align: top;
    text-align: left;
    }
    
    .text2 {
    display: inline;
    font-size: 12px;
    font-family: arial;
    color: green;
    margin: 20px;
    width: 50%;
    vertical-align: top;
    text-align: left;
    }
    
    .text3 {
    display: inline;
    font-size: 12px;
    font-family: arial;
    color: blue;
    margin: 0px;
    width: 30%;
    vertical-align: top;
    text-align: left;
    }
    
    .text4 {
    display: inline;
    font-size: 12px;
    font-family: arial;
    color: orange;
    margin: 10px;
    width: 60%;
    vertical-align: top;
    text-align: left;
    }
    
    .text5 {
    display: inline;
    font-size: 12px;
    font-family: arial;
    color: pink;
    margin: 20px;
    width: 25%;
    vertical-align: top;
    text-align: left;
    }
    
    #leftcolumn { float: left; vertical-align: top;}
    #rightcolumn { float: right; vertical-align: top;}
    
    .vertical-line {
    display: inline;
    background-color: #000;
    width: 1px;
    height: 100%;
    border-right:1px dotted #cccccc;
    }
    </style>
    
    </head>
    
    <body>
    <div class="box">
        <div class="text" id="leftcolumn">This is filler text for the sake of
    nothing more than to demonstrate precisely what this
    example is intended to present; namely, the method of
    implimentation used to create a vertical line using CSS
    in order to sidestep the limitations of core HTML.</div>
    
        <div class="vertical-line"></div>
    
        <div class="text2">This is filler text for the sake of
    nothing more than to demonstrate precisely what this
    example is intended to present; namely, the method of
    implimentation used to create a vertical line using CSS
    in order to sidestep the limitations of core HTML.
    <br /> <br />
    
    <div class="text3" id="leftcolumn">This is filler text for the sake of
    nothing more than to demonstrate precisely what this
    example is intended to present; namely, the method of
    implimentation used to create a vertical line using CSS
    in order to sidestep the limitations of core HTML.</div>
    <center>
    <div class="vertical-line"></div>
    </center>
    
    <div class="text4" id="rightcolumn" >This is filler text for the sake of
    nothing more than to demonstrate precisely what this
    example is intended to present; namely, the method of
    implimentation used to create a vertical line using CSS
    in order to sidestep the limitations of core HTML.</div>
    </div>
    
    <div class="vertical-line"></div>
    
        <div class="text5" id="rightcolumn">
        This is filler text for the sake of
    nothing more than to demonstrate precisely what this
    example is intended to present; namely, the method of
    implimentation used to create a vertical line using CSS
    in order to sidestep the limitations of core HTML.</div>
    </div>
    </body>
    </html>
    
    Regards,
    Renada
     
  2. EQnoble

    EQnoble Well-Known Member

    Could you explain exactly what you are trying to do....

    I see a lot more problems than the one you mentioned.

    random.png

    Are you literally just trying to have two even columns with a bunch of blocks inside of them that have the different styling?
     
  3. Renada

    Renada Active Member

    hmm it didn't look like that on my editor lol

    I was trying to create a three column block without using tables but the third column wouldn't play. In the centre column I want text (or whatever)) then be able to divide that column 30/70. Maybe the attached screenshot of my editor will help explain it better.

    column 1 - column 2 - column 3
    col4 col5

    columns.PNG

    As you can see the pink block is at the bottom instead of the top.

    Thanks for looking at this :)

    Renada
     
  4. EQnoble

    EQnoble Well-Known Member

    Ok I will rewrite what I think you want....I am getting sleepy so if I don't get a second wind and get to it now...I should get it done in the morning.

    I have an idea of how I would do it personally rather than class and id in the divs, unless for some reason you need it to have a class and an id for some reason.

    If I setup a basic set of wrappers for you, will you be able to style them; color and text-wise? Or do you need those classes the way they are?
     
  5. Renada

    Renada Active Member

    Thank you so much, I don't mind how you do it. The colours are only the way they are so I could see what was going on and I can probably change all those myself - lol famous last words.

    Thanks again :)

    Renada
     
  6. EQnoble

    EQnoble Well-Known Member

    Your welcome....ok here is as raw as I could make it for you to try and understand how it works.
    Also remember the widths can all be adjusted to pixels instead of %.

    I used <i>talics, <s>trikethru, <u>nderline and <b>old to help you easily identify the paragraph

    lil.png big.png
     

    Attached Files:

  7. EQnoble

    EQnoble Well-Known Member

    Attached the html file as well...let me know how this works for you.
     
  8. Renada

    Renada Active Member

    Thank you very much, I'm off to experiment now :) Will let you know how I get on.

    Renada :)
     
  9. EQnoble

    EQnoble Well-Known Member

  10. Renada

    Renada Active Member

    Hi :)

    It works a treat, thank you. It goes a big wonky in Explorer but in Firefox it's exactly how I wanted it :)

    Renada
     
  11. EQnoble

    EQnoble Well-Known Member

    yeah I knew that about ie...but I literally don't support m$ as far as things concerning internet go..(I make an exception for silverlight but yeah still lol) I did try it in opera firefox safari and chrome and it seems to work fine in those.

    offtopic opinion: m$ should either get at least in the ballpark with standards or remove themselves from the consumer browser market.
     
  12. Renada

    Renada Active Member

    Same here, I hate IE. Thank you very much for all your help :)

    Renada
     
  13. EQnoble

    EQnoble Well-Known Member

    no problem
     
    a legacy reborn likes this.

Share This Page