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

CSS help appreciated

Renada

Active member
#1
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
 

EQnoble

Well-known member
#2
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?
 

Renada

Active member
#3
Could you explain exactly what you are trying to do....

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

View attachment 19093

Are you literally just trying to have two even columns with a bunch of blocks inside of them that have the different styling?
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
 

EQnoble

Well-known member
#4
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?
 

Renada

Active member
#5
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?
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
 

EQnoble

Well-known member
#6
Thanks again :)

Renada
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
 

Attachments

EQnoble

Well-known member
#11
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.
 

Renada

Active member
#12
yeah I knew that about ie...but I literally don't support m$ as far as thing 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.
Same here, I hate IE. Thank you very much for all your help :)

Renada