22 replies [Last post]
Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

I'm new to CSS and I'm trying create a design with 3 columns in the middle the code is here:

#scroll {unicode-bidi: bidi-override; direction:rtl; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; margin:0 auto; }

#wrapper {width:750px; margin:5px auto 0 auto; text-align:left; background:#fff;}
#left_column {width:250px; float:left;}
#right_column {width:250px; float: right;}
#title {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:1.2em; margin:0; color:#565; text-align:left; margin-bottom:10px;}

{ITEM}
{TITLE}
{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}
{TITLE}
{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}
{TITLE}
{DESCRIPTION}   [Read more]

{END ITEM}

You may notice that I have 2 div's with the same ID .. But that is just because I don't know how to make it right! So, I want to split each box and they must stay centered..

Thanks in advance!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

I think either a link to the

I think either a link to the page, or an image of what you're trying to accomplish, would help us to help you better Smile

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

this is how it look

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

You're suffering from major

You're suffering from major divitis. Use semantic and structural HTML tags to mark up your content, not divs.

Since the columns have a known fixed width, then something like this should do the trick:

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

The wrapper is used to center the boxes. Give it a width slightly larger than the total of the three boxes, and margin: 0 auto; to center it.

Let us know how you get on with it or if you need any more help!

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Thanks for your patience on

Thanks for your patience on this but unfortunately I still cant get it right!

#wrapper {width:750px; margin:5px auto 0 auto; text-align:left; background:#fff;} .column {width:150px; float:left; margin: 0 auto; } #scroll {unicode-bidi: bidi-override; direction:rtl; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; margin:0 auto; }

I don't know what to enter on the "float" of the .column! after trying with some different way the boxes still together Stare

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

margin: 0 auto; should only

margin: 0 auto;

should only be used for "wrapper" as it's what centers it.

Try changing it in ".column" to

margin: 1em;

and see what happens.

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Almost there!!

Almost there!!

http://img510.imageshack.us/img510/9549/nowse7.jpg

now, the boxes aren't centred!

body {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:0.8em; margin:0; color:#565; text-align:left; margin-bottom:10px; }
a, a:visited {color:#000;}
a:hover {text-decoration:none;}

#scroll {unicode-bidi: bidi-override; direction: ltr; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; }

#title {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:1.2em; margin:0; color:#565; text-align:left; margin-bottom:10px;}

#wrapper {width:750px; margin:0 auto; text-align:left; background:#fff;}
.column {width:150px; float: right; margin: 1em; }

Almost! Smile What to change now?

Thanks for your patience, thepineapplehead!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Can we see the HTML code as

Can we see the HTML code as well please?

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Yes:) <style

Yes:)

body {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:0.8em; margin:0; color:#565; text-align:left; margin-bottom:10px; }
a, a:visited {color:#000;}
a:hover {text-decoration:none;}

#scroll {unicode-bidi: bidi-override; direction: ltr; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; }

#title {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:1.2em; margin:0; color:#565; text-align:left; margin-bottom:10px;}

#wrapper {width:750px; margin:0 auto; text-align:left; background:#fff;}
.column {width:200px; float: right; margin: 1em; }
#right_column {width:250px; float: right;}

h1 {
width: 100%;
height: 155px;
background: #565;
margin-bottom: 15px;
}

Lorem ipsum

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

Thank you

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

First thing's first, remove

First thing's first, remove the IDs on each column and apply the styles to the .column section of the CSS.

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

http://img313.imageshack.us/i

http://img313.imageshack.us/img313/7423/semttulo1pv4.gif

We are so close! Check the image and see if you can understand what I want to say!

Oh and on IE: http://img521.imageshack.us/img521/9325/untitledya9.jpg Sad

New code:

body {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:0.8em; margin:0; color:#565; text-align:left; margin-bottom:10px; }
a, a:visited {color:#000;}
a:hover {text-decoration:none;}

#title {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:1.2em; margin:0; color:#565; text-align:left; margin-bottom:10px;}

#wrapper {width:750px; margin:0 auto; text-align:left; background:#fff;}
.column {width:200px; float: right; margin: 1em; unicode-bidi: bidi-override; direction: ltr; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; }

h1 {
width: 100%;
height: 155px;
background: #565;
margin-bottom: 15px;
}

Lorem ipsum

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

{ITEM}

{TITLE}

{DESCRIPTION}   [Read more]

{END ITEM}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Margins

I can;t view the images as they're blocked at work, but by creating a test case with your code I can see that only two columns fit on one row, the third breaks onto the next line.

If this is he behaviour you're seeing in IE, you need to increase the width of #wrapper.

The total width of the content is 3x200px (600px) + 6 em (3 lots of 1em margin on the columns). EMs are relative, so if you shrink the text size through your browser, the columns will fit.

It's probably a good idea to EITHER: a) set the width of #wrapper in ems so it will expand, or b) use px for the margins between columns.

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Argh,

Argh,

I made a few changes on the code, here is it (you'll see the url of the page .. If you want to see the working example just check http://www.lastnews.org/index2.php)

lastnews.org

body {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:0.8em; margin:0; color:#565; text-align:left; margin-bottom:10px; }
a, a:visited {color:#000;}
a:hover {text-decoration:none;}

#wrapper {width:80%; margin:0 auto; text-align:left; background:#fff;}
.column {width:379px; float: right; margin: 1em; unicode-bidi: bidi-override; direction: ltr; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; }

#beg {
width: 100%;
height: 140px;
background: #ba8;
margin-bottom: 12px;

}

noticias da treta

<?php include 'http://lastnews.org/us/topnews/getrss.php?count=10'; ?>

<?php include 'http://lastnews.org/us/us/getrss.php?count=10'; ?>

<?php include 'http://lastnews.org/us/sports/getrss.php?count=10'; ?>

With the new code doesn't fit the screen .. bah! Sad ! But What i really wanted is 3 columns on each "line" that will have different topics, but I can't even do the 3 columns :\ ! Anyhelp man ?

I really appreciate your time.. Thanks man!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

width:379px; margin: 1em;

width:379px; margin: 1em; padding:10px;

Those three things soon add up when there's three columns! 3x380 is 1140, which is already too big to fit on a 1024 screen. Adding in 60 pixels of horizontal padding and 6ems of margins, it's no wonder it doesn't fit!

Reduce the width to something like 250 or 300px Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Hm ok, I did that! Create

Hm ok, I did that!

Create a new file with this code and check how it looks!

lastnews.org

body {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; font-size:0.8em; margin:0; color:#565; text-align:left; margin-bottom:10px; }
a, a:visited {color:#000;}
a:hover {text-decoration:none;}

#wrapper {width:80%; margin:0 auto; text-align:left; background:#fff;}
.column {width:300px; float: right; margin: 1em; unicode-bidi: bidi-override; direction: ltr; display: block; width:px; height:400px; overflow:auto; padding:10px; border:1px solid #ba8; }

#beg {
width: 100%;
height: 140px;
background: #ba8;
margin-bottom: 12px;

}

noticias da treta

<?php include 'http://lastnews.org/us/topnews/getrss.php?count=10'; ?>

<?php include 'http://lastnews.org/us/us/getrss.php?count=10'; ?>

<?php include 'http://lastnews.org/us/sports/getrss.php?count=10'; ?>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

I shouldn't have said 300

I shouldn't have said 300 should I? Tongue 3x300 is 900, and on a 1024 width screen that only leaves 124 pixels of space for all the margins and padding :S

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Bah, I need to find out some

Bah, I need to find out some other way of doing this! Thanks for your time Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

The way you're doing it is

The way you're doing it is correct, you just need to reduce the width of the columns a little bit Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

I did, but I need to find

I did, but I need to find another way of placing the news!

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

So ok, I've made a few (big)

So ok, I've made a few (big) changes

Here is the link: http://lastnews.org/index3.php

What I want now is to center the text with the flags like this example image I made:

Check the link for the original version!

Thank you!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Set the images to background

Set the images to background images of each element, something like this:

US News US News US News

a.us {background: #fff url(images/flag-us.gif) no-repeat 50% 0; }
a.uk {background: #fff url(images/flag-uk.gif) no-repeat 50% 0; }
a.pt {background: #fff url(images/flag-pt.gif) no-repeat 50% 0; }

Verschwindende wrote:
  • CSS doesn't make pies

Tiago
Offline
Regular
Portugal
Last seen: 14 years 6 weeks ago
Portugal
Joined: 2006-12-10
Posts: 40
Points: 0

Thanks for the suggestion

Thanks for the suggestion but I reduced the size of the flags and I like how it looks!

I think I'm over with this layout Smile!

I really appreciate your help!

I'll be back Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 22 hours 5 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Tiago wrote:I'll be back I

Tiago wrote:
I'll be back Smile

I look forward to it, this was good fun Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies