GetDotted Domains

Viewing Thread:
"A little CSS related question"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Sun 27/07/03 at 18:01
Regular
Posts: 787
I've completely forgotten what I should do to achieve what I want.

I've got the following code:


... a little text...
Some text

Some text

... a lot mroe text ...


The 'Main-Segment' has a width of 600px, whereas each 'Info-' box has a width of 285px with a 5px margin all around.

All the objects are set with 'position: relative;' property. All the other properties set for the two are appearing as they should do (padding, font, background images etc).

I would like these two information boxes to appear beside each other, but instead they default to one under the other.

Without using absolute positioning (because that would make things more complicated with the content) how can I tell the two information boxes to stay next to each other, and not on top of each other??

I appreciate any help on this little bit of bother I'm having.
Tue 29/07/03 at 12:42
Regular
"You've upset me"
Posts: 21,152
Tyla wrote:
> Technically there not as most DIV's are defined using CSS which allows
> you to alter their elemental status, as with any tag etc. If your
> uising them relativley, then 0 is always the top edge's position in
> relation tot he bottom of the previous element. If using Absolute,
> then obviously this isn't the case.
>
> Negative values in CSS are most definatley NOT allowed and although
> are often used to centre a box absolutely to a page, these should be
> refrained from being used.
>
> Float is the only way to go with this.

Fair enough. What about using a negative value with a margin though as padding doesn't allow negatives?
Mon 28/07/03 at 22:54
Regular
"l33t cs50r"
Posts: 2,956
RastaBillySkank wrote:
> Heh, try Tyla's way, he's the CSS guru.
>
> What I meant was that because
's are block level elements
> they always start on a new line when you create them, and because
> you're using relative positioning (with top:0px; I believe) it renders
> the div in the same place it usually would be (ie, on a new line). So
> if you set the divs top to
>
> position:relative;
> top:- the height of the div;
>
> It *should* render it on the same line as the other block. I haven't
> tested this so I don't know if it works, but technically it should do.


Technically there not as most DIV's are defined using CSS which allows you to alter their elemental status, as with any tag etc. If your uising them relativley, then 0 is always the top edge's position in relation tot he bottom of the previous element. If using Absolute, then obviously this isn't the case.

Negative values in CSS are most definatley NOT allowed and although are often used to centre a box absolutely to a page, these should be refrained from being used.

Float is the only way to go with this.
Sun 27/07/03 at 21:52
Regular
"You've upset me"
Posts: 21,152
Heh, try Tyla's way, he's the CSS guru.

What I meant was that because
's are block level elements they always start on a new line when you create them, and because you're using relative positioning (with top:0px; I believe) it renders the div in the same place it usually would be (ie, on a new line). So if you set the divs top to

position:relative;
top:- the height of the div;

It *should* render it on the same line as the other block. I haven't tested this so I don't know if it works, but technically it should do.
Sun 27/07/03 at 21:46
Regular
"It goes so quickly"
Posts: 4,083
Sorry, this site took ages to load the reply box.

I'll take a look into that Tyla, thanks.
Sun 27/07/03 at 21:45
Regular
"It goes so quickly"
Posts: 4,083
Thanks RBS.

But, I'm a little confused as to what you ment :)
Sun 27/07/03 at 21:39
Regular
"l33t cs50r"
Posts: 2,956
Your going about this the wrong way...

You take your main container and enter the first column of text into that then create a floating div to "float: right;" for the other coloumn using border setting etc to format it. To get it to continue below those two colmuns, create a
witht he properties of "clear:all;"

Have a look at:
http://www.thenoodleincident.com/ tutorials/box_lesson/boxes.html
http://glish.com/css/9.asp
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Sun 27/07/03 at 20:45
Regular
"You've upset me"
Posts: 21,152
You need to change the top of the second box (the one that appears underneth the otherone).

Set the top of the second box to -heightofthebox.
Sun 27/07/03 at 18:01
Regular
"It goes so quickly"
Posts: 4,083
I've completely forgotten what I should do to achieve what I want.

I've got the following code:


... a little text...
Some text

Some text

... a lot mroe text ...


The 'Main-Segment' has a width of 600px, whereas each 'Info-' box has a width of 285px with a 5px margin all around.

All the objects are set with 'position: relative;' property. All the other properties set for the two are appearing as they should do (padding, font, background images etc).

I would like these two information boxes to appear beside each other, but instead they default to one under the other.

Without using absolute positioning (because that would make things more complicated with the content) how can I tell the two information boxes to stay next to each other, and not on top of each other??

I appreciate any help on this little bit of bother I'm having.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Unrivalled services
Freeola has to be one of, if not the best, ISP around as the services they offer seem unrivalled.
Just a quick note to say thanks for a very good service ... in fact excellent service..
I am very happy with your customer service and speed and quality of my broadband connection .. keep up the good work . and a good new year to all of you at freeola.
Matthew Bradley

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.