Need a little help in CSS Coding

ceecookie SG

Hi, would like a little help for CSS coding here.

Basically, i have a website that has a sidebar on the top left side of the screen. The top right holds some text and at the bottom lies more text.

You see, i wish to align the top and bottom text such that they are parallal to each other.

However, due to the sidebar(which i put as 300px width 500px height overflow hidden) i think it is such that the bottom text appeared to slant to either side of the screen.If i put float left it will go left while right get right.But middle nor center wont get the alignment i want either.

This is originally before i tried to remedy it.

After applying the code " padding-left: 174px;", it appears ok(what i wanted) in Firefox.

But the problem still persist in Internet Explorer which i know it's due to incompatibilites between the 2 Browsers.

Therefore,is there any better solution/code to apply such that its also aligned as in picture 2?

(Arrowed) - The attempted code remedy.

GIB SG

Why not just use tables to fix the positions?

E.g.

<table>
<tr>
<td>my side bar </td>
<td style="text-align: center;">my middle bit </td>
<td>empty space</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">bottom bit</td>
</tr>
</table>

ceecookie SG

Is it CSS coding?i have to do it in CSS and in external style sheet

GIB SG

Without seeing the whole HTML and the rest of the CSS, kinda hard to know what to fix.

You can try one thing. Turn the top left box into a div with position: absolute; left: 0px; top: 0px; and the rest of the page should centre correctly.

In other words, you do the middle bits first from top to bottom. Then only add the div for the top left box.

E.g.

<div class="mybox">
My top left box here
</div>
<div class="normaltext">
My first text
</div>
<div class="normaltext">
My second text
</div>
<div class="secondtext">
My last bits
</div>

Inside CSS file

div.mybox {
position: absolute;
top: 0px;
left: 0px;
}

div.normaltext {
width: 100%;
text-align: center;
padding-left: 200px; /*adjust yourself
padding-right: 200px; /*adjust yourself
}

div.secondtext {
width: 100%;
text-align: center;
padding-left: 100px; /*adjust yourself
padding-right: 100px; /*adjust yourself
}

LatecomerX SG

Is this what you are trying to achieve?

http://latecomerx.com/work/Project_166_sgf321156/index.html

ceecookie SG

Is this what you are trying to achieve?

http://latecomerx.com/work/Project_166_sgf321156/index.html

Yes,only that the title (Lorem Dimsum) should be aligned along with the rest of the sub-header.

The current code can only work perfectly in either one browser,and not both.

ceecookie SG

Without seeing the whole HTML and the rest of the CSS, kinda hard to know what to fix.

You can try one thing. Turn the top left box into a div with position: absolute; left: 0px; top: 0px; and the rest of the page should centre correctly.

In other words, you do the middle bits first from top to bottom. Then only add the div for the top left box.

E.g.

<div class="mybox">
My top left box here
</div>
<div class="normaltext">
My first text
</div>
<div class="normaltext">
My second text
</div>
<div class="secondtext">
My last bits
</div>

Inside CSS file

Haha...i tried your code..customising it to make sure its aligned...but whenever its perfect on Firefox, IE simply refuse to show it the same -.-

#container {
width:800;
height:600;
margin:auto;
padding: 0 0 0 0;
background-repeat: no-repeat;
position:top;
}

div.sidebar {
position: top;
top: 0px;
left: 0px;
width: 280px;
height: 700px;
color: #FFFFFF;
float: left;
}

div.main_first_part {
width: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: #FFFFFF;
width: 900px;
}

div.main {
width: 100%;
text-align: center;
padding-left: 127px;
padding-right: 100px;

width:1000px;
color: #FFFFFF;

}

My newer code according to GIB.

GIB SG

position: top

Is there such a thing? I thought position only supports static/relative/absolute/fixed.

My code depends on the "position: absolute" part.

ceecookie SG

Not sure, but anyway the stock code that u gave me gave a result of the sidebar at the left but on the right lies the empty space while the actual text is below the sidebar area.

So i customised the code to make the text appear next to the sidebar.

GIB SG

My HTML file, I borrowed wordings from latecomer page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mybox">
<h2>Lily Lee's Links</h2>
<ul>
<li>Hard Link</li>
<li>Normal Link</li>
<li>Easy Link</li>
</ul>
</div>
<div id="container">
<div class="normaltext">
<h2>So what is it actually?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>The Real Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nibh, lacinia eget, rhoncus nec, vestibulum tincidunt, tellus. Duis feugiat. Donec imperdiet massa et sem. Donec nisi. Duis turpis mauris, vestibulum vitae, pulvinar porta, fermentum id, quam. Praesent imperdiet dui a eros. Duis dapibus auctor erat. Phasellus sed metus. Nam cursus. Praesent sed massa. Pellentesque sit amet mi ac neque malesuada aliquam. Proin accumsan mi id nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut purus neque, varius id, sodales sit amet, tempor ac, quam. Etiam velit. Quisque lobortis elementum libero. Sed vel augue. Nullam blandit blandit risus. Quisque rutrum semper mauris.</p>
</div>
<div class="secondtext">
<h2>And why use it?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<h2>The Real Stuff...Again</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede nibh, lacinia eget, rhoncus nec, vestibulum tincidunt, tellus. Duis feugiat. Donec imperdiet massa et sem. Donec nisi. Duis turpis mauris, vestibulum vitae, pulvinar porta, fermentum id, quam. Praesent imperdiet dui a eros. Duis dapibus auctor erat. Phasellus sed metus. Nam cursus. Praesent sed massa. Pellentesque sit amet mi ac neque malesuada aliquam. Proin accumsan mi id nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut purus neque, varius id, sodales sit amet, tempor ac, quam. Etiam velit. Quisque lobortis elementum libero. Sed vel augue. Nullam blandit blandit risus. Quisque rutrum semper mauris.</p>
</div>
</div>
</body>
</html>

My CSS page

div.mybox {
position: absolute;
top: 0px;
left: 0px;
}

div.normaltext {
display: block;
border: 1px solid black;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}

div.secondtext {
display: block;
border: 1px solid black;
text-align: center;
}

#container {
display: block;
border: 1px solid black;
margin: 0 auto; /* align for good browsers */
/*text-align: left;*/ /* counter the body center */
width: 600px;
}

/*
div.container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */

width: 100%;
}
*/

body {
text-align: center;
}

ceecookie SG

Something like that,but the bottom text must be longer..here's a rough layout wich is intended.The sidebar must be bigger too.

What i did to your code was to add width properties to both normaltext and secondtext,but this throw their alignment off so i edited the padding properties such that they appear aligned again.But FF and IE wont show it correctly together.

ceecookie SG

PS: Boundery means the vertical scroll bar area

Header One and Two must be aligned parallel,and there should be no bordering at all,just empty space to seperate them

LatecomerX SG

Yes,only that the title (Lorem Dimsum) should be aligned along with the rest of the sub-header.

The current code can only work perfectly in either one browser,and not both.

I have viewed the page on IE6, IE7, Firefox 2 and Opera 9.5 and I don't see any discrepancy other than the sizes of the font which you can adjust on your own. To align the title as you have described, just move the h1 title into the content div.

meltz SG

not sure this is what u want anot .. borrow the text from late

http://www.mediafire.com/?d1sgtg4j2nb

xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the1500s, when an unknown printer took a galley of type and scrambled itto make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting, remaining essentiallyunchanged. It was popularised in the 1960s with the release of Letrasets heets containing Lorem Ipsum passages, and more recently with deskto ppublis hing software like Aldus PageMaker including versions of LoremIpsum.

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nullam pede nibh, lacinia eget, rhoncusnec, vestibulum tincidunt, tellus. Duis feugiat. Donec imperdiet massaet sem. Donec nisi. Duis turpis mauris, vestibulum vitae, pulvinarporta, fermentum id, quam. Praesent imperdiet dui a eros. Duis dapibusauctor erat. Phasellus sed metus. Nam cursus. Praesent sed massa.Pellentesque sit amet mi ac neque malesuada aliquam. Proin accumsan miid nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Utpurus neque, varius id, sodales sit amet, tempor ac, quam. Etiam velit.Quisque lobortis elementum libero. Sed vel augue. Nullam blandit blandit risus. Quisque rutrum semper mauris.

Itis a long established fact that a reader will be distracted by thereadable content of a page when looking at its layout. The point ofusing Lorem Ipsum is that it has a more-or-less normal distribution ofletters, as opposed to using 'Content here, content here', making itlook like readable English. Many desktop publishing packages and webpage editors now use Lorem Ipsum as their default model text, and asearch for 'lorem ipsum' will uncover many web sites still in theirinfancy. Various versions have evolved over the years, sometimes byaccident, sometimes on purpose (injected humour and the like).

------------------------------------------------- css @charset "utf-8"; /* CSS Document */ body { padding: 0; margin: 0; font: 12px 'Arial', Helvetica, sans-serif; } #holder { padding: 0 0 0 50px; margin: 0; float: left; width: 800px; } #holder h1 { padding: 0 0 0 200px; margin: 0 0 50px 0; display: block; text-align: center; } #holder #left { padding: 0; margin: 0; float: left; width: 250px; } #left h2 { padding: 0; margin: 0 0 15px 0; } #left ul { padding: 0; margin: 0; } #left ul li { padding: 0; margin: 0 0 0 15px; } #left ul li a { padding: 0; margin: 0; color: #000; text-decoration: none; display: block; } #left ul li a:hover { text-decoration: underline } #holder #right { padding: 0; margin: 0; float: left; width: 500px; text-align: center; } #right h2 { padding: 0; margin: 0 0 15px 0; } #right p { padding: 0; margin: 0 0 30px 0; } #holder #below { padding: 0 0 0 150px; margin: 0; clear: both; text-align: center; height: 200px; } #below h2 { padding: 0; margin: 0 0 15px 0; text-align: center; } #below p { padding: 0; margin: 0; }

LatecomerX SG

http://latecomerx.com/work/Project_166_sgf321156/index2.html