4 replies [Last post]
felicks
Offline
newbie
South-East London
Last seen: 16 years 1 week ago
South-East London
Joined: 2003-11-09
Posts: 1
Points: 0

Hi guys,
I have taught myself CSS and like to think that I am comfortable with it, but there is one thing that has bugged me since I learned CSS last year:

Div's automatically have a line break after them and so appear one on top of each other. Is there any way to get Divs to go from left to right accross the page as they are made?

Thanks in advance,

Felix.

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 3 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

DIV alignment

There are three ways to achieve side-by-side divs.

One is to start with a div that has a side margin to
create a sizable empty space next to it, then
absolutely position a second div, dropping it into
that empty space. This layout demo uses that method:

http://positioniseverything.net/thr.col.stretch.html

The other way is to make the first div a float, giving
it a defined width, and having a following div with a
side margin of the same width as the preceeding float.
The side margin is not required, but then the following
div is actually in the same starting position as the float.
and only the "inline" contents (text) within the following float
stay out from beneath the float, and once below the float
the text is allowed to fill the entire width available.

THis article explains these points in detail:

http://positioniseverything.net/articles/float-theory.html

Another article that explains the overall flowing and positioning
scheme of CSS is here:

http://positioniseverything.net/articles/flow-pos.html

There is one major bit of nastiness you need to be aware of
when using floats in IE/win, detailed in these pieces:

http://positioniseverything.net/articles/towards.html
http://positioniseverything.net/floatmodel.html

HTH
Big John

http//www.positioniseverything.net/

cvk
Offline
Regular
right behind you
Last seen: 16 years 2 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

DIV alignment

In general you can cause block elements to display inline by using display: inline; on them. It's a good way to add accessibility to such things as horizontal navigation bars because you can use an unordered list with an anchor in each list item.

Try this:

div.myclass {
     display: inline;
}

There's a little example on my site.

c v k @ z y b x . c o m

jagobezzer
Offline
newbie
United Kingdom
Last seen: 16 years 1 week ago
United Kingdom
Joined: 2003-11-13
Posts: 3
Points: 0

DIV alignment

Hi Big John,

Bez here from Sunny ( or not so sunny ) England UK I've been teaching myself CSS as I am making web sites for community groups and trying to make them as accessible as possible.

I've done a couple of sites.
http://www.dcrp.co.uk
http://www.doncasterrefurnish.co.uk

Both of which are "tableless" yee harr.. i'm not sure how they show up on different browsers netscape 6 seems okay as does IE 6 I was just wondering if you could give them a quick look and see how I'm doing for a novice !

I've coined a phrase which might catch on as I've been told that my designs are crap in CSS... So I fought back with a new phrase which might catch on ?

"ARE U A WEBSITE WAITER" ( tables everywhere ! Laughing out loud )

Anyhow your site is great and taught me a lot. Thanks

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 16 years 3 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

DIV alignment

I can't take time to get into it, but a cursory
look seems not to bad. There's many things
that can be improved, but hey, yer a newbie,
right? All that stuff will come in time.

The main thing is to cultivate an incredibly anal
attitude about the code. Let nothing escape
notice and you will have far fewer problems.
Now if only I could follow that advice...

http//www.positioniseverything.net/