Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 22, 2024 - @263.04 (what is this?)
Forum activity rating: Three Stars Posts: 38/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :ha: :pc: Hello Melonland! :pc: :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Best way to have a 2 column site?


« previous next »
Pages: [1] Print
Author Topic: Best way to have a 2 column site?  (Read 2429 times)
Obspogon
Jr. Member ⚓︎
**


Hi

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: obspogon
iMood: Obspogon
Matrix: Chat!
XMPP: Chat!

View Profile WWW

First 1000 Members!OG! Joined 2021!
« on: November 21, 2021 @798.13 »

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

----------------------
https://obspogon.neocities.org/
----------------------

Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: November 21, 2021 @813.16 »

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

<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


everything lost will be recovered, when you drift into the arms of the undiscovered
Obspogon
Jr. Member ⚓︎
**


Hi

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: obspogon
iMood: Obspogon
Matrix: Chat!
XMPP: Chat!

View Profile WWW

First 1000 Members!OG! Joined 2021!
« Reply #2 on: November 21, 2021 @967.45 »

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

----------------------
https://obspogon.neocities.org/
----------------------

fLaMEd
Casual Poster ⚓︎
*

⛺︎ My Room

View Profile WWW

First 1000 Members!OG! Joined 2021!
« Reply #3 on: February 13, 2023 @208.53 »

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)

Scream/Lol, why would you want to do it the old way haha! 

Like going for a run with a weight vest :joy:
Logged
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

How do you prefer to keep your site organized (or not)

Started by NightdriftBoard ✁ ∙ Web Crafting

Replies: 30
Views: 8822
Last post August 02, 2024 @153.99
by candycanearter07
GUIDE: How to fix links on a frame site! - MK Frame-Link System

Started by MelooonBoard ✁ ∙ Web Crafting

Replies: 9
Views: 10321
Last post March 10, 2024 @777.40
by Salty
Looking for affiliates for my personal site and site collective network

Started by AltairBoard ☆ ∙ Showcase & Links

Replies: 0
Views: 1475
Last post January 20, 2022 @306.20
by Altair

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi