Home Help Search Login Register

Welcome, Guest. Please login or register.
November 29, 2021, 07:33:16 pm
Forum activity rating: One Star Posts: 6/24hrs Show Unread Posts | Unread Replies | Own Posts | Recent Posts
News: Minor disaster profile icons lost :^[ Please re-upload! - Added RSS feed link, get the latest forum posts in your RSS reader! - Improved SpaceHey links!

+  MelonLand Forum
|-+  Workshop
| |-+  Tutorials & Questions
| | |-+  Best way to have a 2 column site?
« previous next »
Pages: [1] Print
Author Topic: Best way to have a 2 column site?  (Read 36 times)
Obspogon
Newbie
*


Hi

Posts: 22
Karma: 4

Discord: Obspogon#9715
SpaceHey: Friend Me!

View Profile WWW
« on: November 21, 2021, 07:09:18 pm »

I want to have a homepage with 2 columns of unequal width but the same height.
Logged

----------------------------
https://obspogon.neocities.org/
----------------------------
Melooon
Administrator
Jr. Member
*****


So many stars!

Posts: 68
Karma: 7

Discord: Melonking#7372
SpaceHey: Friend Me!

View Profile WWW
« Reply #1 on: November 21, 2021, 07:30:57 pm »

The new school way would be to use flex, although that's designed for sites that have dynamic width.
Which you can read about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you wanna do it the old way you can make both columns float left, then set a fixed width for each (you can also do a % width for dynamic sizing)

Something like: Untested sample code to give an idea, may not directly work! This will create 2 columns that should always be 100% the height of the wrapper, so in theory as the wrapper expands, so will both columns.

Code: [Select]

<div id="wrapper">
  <div id="col-a"></div>
  <div id="col-b"></div>
</div>

#wrapper {
  width: 700px;
  margin: 0px auto 0px auto;
}

#col-a, #col-b {
  float: left;
  height: 100%;
}

#col-a {
  width: 200px;
}

#col-b {
  width: 500px;
}

Logged

Obspogon
Newbie
*


Hi

Posts: 22
Karma: 4

Discord: Obspogon#9715
SpaceHey: Friend Me!

View Profile WWW
« Reply #2 on: November 21, 2021, 11:13:08 pm »

Used the flex method and it works now. Thanks.
Logged

----------------------------
https://obspogon.neocities.org/
----------------------------
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.18 | SMF © 2021, Simple Machines RSS | WAP2


Visit Melonking.Net! Visit the MelonLand Forum! Daniels Network Support the Forum