Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Making horizontal boxes



1:36 am on Oct 20, 2012 (gmt 0)

5+ Year Member

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <snip> where the boxes are next to each other, and will this affect the page width on my site.
Someone told me use DIV tags but how do i put this in HTML code?.

[edited by: incrediBILL at 2:59 pm (utc) on Oct 20, 2012]
[edit reason] removed URLs, see forum Charter [webmasterworld.com...] [/edit]


5:33 am on Oct 20, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Whoa. You don't need a cut-and-paste answer. You need to go off and learn a bit of CSS. Spend an hour or two at the tutorial of your choice-- most people seem to end up at w3schools in spite of its shortcomings. And then once you've got a general idea of what's going on, bookmark the CSS Index [w3.org].

It souns as if what you're looking at is two side-by-side elements with the display propery "inline-block". But, again, a cut-and-paste answer will do you more harm than good.


9:44 am on Oct 20, 2012 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You do need to look into CSS and indeed, you need to learn it as Lucy24 says.

To bootstrap you a bit: CSS has a number of way to position things:

  • inline: (and/or inline-block): an element is like a word on a line of text. Put some of these one after the other and they'll act like words on a line, including wrapping when they run out of width, and overflowing if they have to.

  • floating: the old school favorite (old versions of IE have horrible CSS support) is much like an image with the align="left" or align="right" property back in the old days of HTML 3.x: they place themselves to a side and will let the rest of the text flow next to them, pushing text out of the way.

  • relative positioning: rarely used: but you can "nudge" elements in any direction (often this property is used for "side effects" such as triggering features in IE to avoid bugs or to make the element gain "position" (see further)

  • absolution positioning: this puts an element relatative to the closest parent that has gained position.

  • fixed positioning: this puts relative to the viewport (the screen, so it does not scroll with the page.


4:45 pm on Nov 7, 2012 (gmt 0)


The following 2 messages were cut out to new thread by bill. New thread at: html/4517013.htm [webmasterworld.com]
3:09 pm on Nov 8, 2012 (jst +9)

Featured Threads

Hot Threads This Week

Hot Threads This Month