/    Sign up×
Community /Pin to ProfileBookmark

Hi in CSS

How do you make a box with 2 colmuns (divided)

Thanks

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@patenaudematJul 01.2006 — There are a few things you might try.

One method is to create a container box <div>, and make each column a <div> inside it, with the CSS float property set for each, and width set to 50%. Example:

[code=html]<div id="container">
<div style="width:50%;float:left;">
This is the left column.
</div>
<div style="width:50%;float:right;">
This is the right column.
</div>
</div>[/code]


It might help if you set position: relative; for the container box, just to take care of any possible display issues (will only fix things, not break them).

Another would be the same concept, but absolutely positioning the columns (more reliable than float). Of course, this works best if you know the width of your container. Some browsers *cough cough*IE*cough* [i]may[/i] not handle this properly, though I haven't tried it so I don't know.

[code=html]<div id="container>
<div style="width:50%;position:absolute;left:0px;">
This is the left column.
</div>
<div style="width:50%;position:absolute;right:0px;">
This is the right column.
</div>
</div>[/code]


Two issues: a) you will [i]need[/i] to set some sort of positioning for the container, relative will probably work fine; b) this removes the columns from the page flow, so if there was going to be anything below the container, that [i][b]will not display correctly[/b][/i]. Most likely, it will appear under the columns. Only use the second one if the columns are the whole page, or the last thing on the page.

Hope it helps!

-Matt
×

Success!

Help @comptech520 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...