IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
 
 Reply to this topicStart new topic

Basic Css Layout Issue

, Floated Cell with similar height
moldboy
no avatar
Privileged Member
*********
Group: Members
Posts: 516
Joined: 29-April 05
From: Canada Eh?!?
Member No.: 6,408
Post #1 post Apr 9 2006, 07:23 PM
Okay say I was building a site (what do you know I am!) and I want to use CSS. the problem being I don't know how to make a floated cell be the same height as another. FOr example
CODE

<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>

</div>


now If I float the left to the left and the right to the right and set ther widths so that they will be beside eachother the left div is shorter then the right, which makes sense because there is more content in the right. I want to know how to make them the same height without specisifing the actual height, because it may change.
Go to the top of the page
+Quote Post
truefusion
no avatar
Religion is unconscious and metaphysical, therefore incapable of causing harm.
***************
Group: [MODERATOR]
Posts: 2,094
Joined: 22-June 05
From: 127.0.0.1 — no place like it.
Member No.: 8,528
myCENT:60.70
Post #2 post Apr 9 2006, 08:22 PM
If you're under standard-compliant mode, then i dont think you can specify 100% height. But, with certain styles, you can make it seem like it is. For example, if "left" has a border, remove it, and do the same with "right". But, just have "main" with the border.

This post has been edited by truefusion: Apr 9 2006, 08:24 PM
Go to the top of the page
+Quote Post
jlhaslip
no avatar
<?php $answer = googleit( $question ) ; ?>
*******************
Group: [MODERATOR]
Posts: 4,437
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:12.90
Post #3 post Apr 9 2006, 08:51 PM
There is a technique known as "faux columns" which would apply to solve your problem of the height of the left column being less than the Main Content. Look it up at http://www.alistapart.com.
And the other thing you would want to add to the css for the page you list up there would be a margin on the right - hand div that is equal to or greater than the width of the left-hand column. The margin would be in the same direction as the floated column. ie: margin-left. It would be un-neccesary to float the right hand column on the page.

HTML
<div id="main">

<div id="left">
just some </br> stuff over </br> here!
</div>

<div id="right">
but...</br> over here </br> I have </br> even more stuff</br> to </br> display</br>
</div>


Css for the page:
CODE

body { margin:0; padding: 0;}
#main {}
#left { float:left; width:20%;}
#right { margin-left: 20%;}
Plus the code required for the faux-columns.
Go to the top of the page
+Quote Post
moldboy
no avatar
Privileged Member
*********
Group: Members
Posts: 516
Joined: 29-April 05
From: Canada Eh?!?
Member No.: 6,408
Post #4 post Apr 9 2006, 10:31 PM
QUOTE
There is a technique known as "faux columns"
thanks that's exaclty what I wanted, although I thought there might be a diffrent way as all the sites use this two coloum structure and still have the same height. f there is another way, please tell.
Go to the top of the page
+Quote Post
jlhaslip
no avatar
<?php $answer = googleit( $question ) ; ?>
*******************
Group: [MODERATOR]
Posts: 4,437
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol
myCENT:12.90
Post #5 post Apr 10 2006, 12:18 AM
If there was another way that worked and I knew about it, I would have mentioned it.
Also, don't forget a Doc Type Declaration.
Go to the top of the page
+Quote Post
Tyssen
no avatar
***********
Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
Post #6 post Apr 10 2006, 12:53 AM
QUOTE(jlhaslip @ Apr 10 2006, 10:18 AM) [snapback]242435[/snapback]

If there was another way that worked and I knew about it, I would have mentioned it.

http://www.positioniseverything.net/articles/onetruelayout/
Go to the top of the page
+Quote Post
« Next Oldest · CSS (Cascading Style Sheets) · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 bluedragon 599 27th June 2008 - 01:38 PM
Last post by: rvalkass
No New Posts   0 Jarlaxe 1,005 23rd June 2007 - 11:13 AM
Last post by: Jarlaxe
No New Posts   1 illdevilinc 891 11th July 2006 - 10:52 PM
Last post by: kdr_98
No New Posts 2 encryptedwrath 115 30th October 2008 - 07:18 PM
Last post by: encryptedwrath
No New Posts   0 Trystim 342 20th September 2004 - 02:52 PM
Last post by: Trystim
No New Posts   0 Zenchi 802 28th September 2004 - 03:35 AM
Last post by: Zenchi
No New Posts   3 X3r0X 883 28th September 2004 - 02:30 PM
Last post by: X3r0X
No New Posts   4 BoSZ 613 21st October 2004 - 09:43 PM
Last post by: Jeremie
No new   29 alapidus 2,119 6th February 2005 - 04:36 PM
Last post by: mahesh2k
No New Posts 4 spawn_syxx9 1,861 10th March 2006 - 04:01 AM
Last post by: Dokudami
No New Posts   2 clouds421 410 12th November 2004 - 08:24 PM
Last post by: clouds421
No New Posts   5 Goosestaf 552 25th November 2004 - 07:05 AM
Last post by: filipc
No New Posts   1 faceofdie 693 17th November 2004 - 06:47 PM
Last post by: serverph
No New Posts 10 serverph 802 15th July 2007 - 12:47 AM
Last post by: homespeaker
No New Posts   1 kvarnerexpress 466 14th December 2004 - 12:18 AM
Last post by: sandymc


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

RSS Open Discussion Time is now: 9th January 2009 - 10:09 PM
© 2009  Trap17: Open Discussion, Free Web Hosting. a member of xisto.