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.
Regards,
Renada
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
