Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Bset way to handle divs 1

Status
Not open for further replies.
gwar2k1

gwar2k1

Programmer
Apr 17, 2003
387
GB
Hi, Im working on a forum layout and am quite stuck with my div elements. This solution would be easier to code using tables but id prefer to use divs.

I have a "row" comprising of 2 "columns" (one dive next to another).
I can place them together no problem, what is causing a problem however is getting one to be the same size as the other.

Obviously with a forum, posts are different lengths. The message body is going in the div on the right, and user details on the left. When a short post is made, the right div is much smaller than the left but when a long post is made, the left div is much smaller than the right.
To try and resolve this, i placed both inside a single div and gave them (left and right) the height: 100% property... unfortunately this just filled the page.

Is there a way to make this work? I was thinking about minheight / maxheight and using a scroll for the right div but was also wondering if there was a better way of doing it?

Thanks in advance

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Sort by date Sort by votes
Unforunately divs only expand to fit the height of their content.

You could cheat though and there are a couple of methods. I've used one I found at on a site I'm developing now (new.lighthousecc.co.uk).

You wrap both divs in another div that acts similar to a table row. In the row div you have a background image that you can tile to make it appear like both divs are the same length. This is obviusly not an ideal situation but is the best solution I've seen

MrBelfry
 
Upvote 0 Downvote
You could dynamically measure the height of each DIV and adjust the size of the smaller one to the height of the other. [thumbsup2] ... such as:
Code: 
<html>
<head>
	<title>Resize Divs</title>
<style>
#div1, #div2 {
	width: 50%;
	float: left;
	border: 1px solid #ff0000;
}
</style>

<script type="text/javascript">
function ResizeDivs() {
	var fst=document.getElementById("div1");
	var sec=document.getElementById("div2");
	var fstH = fst.offsetHeight;
	var secH = sec.offsetHeight;

	if(fstH > secH) {
		sec.style.height = fstH;
	} else {
		fst.style.height = secH;
	}
}
</script>
</head>

<body onload="ResizeDivs();">
<div id="div1">This is the left div</div>
<div id="div2">This is the right div and is really long<br>because I have added<br> a couple of breaks</div>
</body>
</html>

Hope this helps.

Pete.


Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
is there a get element by class?

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Upvote 0 Downvote
guess not lol, ill stick to the ids hehe thanks that works a charm and ill be able to re use it on other sites thanks =D

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Upvote 0 Downvote
Okay it works by itself but not on the page i want lol... ive abanndoned that idea and went back to basics:

Code: 
	<!-- BEGIN postrow -->
	<div style="width: 100%; position: relative; top: 5px;">      
	<div style="position: absolute; left: 0px; width: 200px;">
          <a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b><br>
          <center>{postrow.POSTER_AVATAR}</center><br>
          {postrow.POSTER_JOINED}<br>
          {postrow.POSTER_POSTS}<br><br>
          {postrow.POSTER_FROM}<br><br>  
	  {L_POSTED}: <br>
            {postrow.POST_DATE}<br>
	  {L_POST_SUBJECT}: {postrow.POST_SUBJECT}
        </div>      

        <div style="position: absolute; left: 200px; width: 100%;">
          {postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}<br>
          {postrow.MESSAGE}{postrow.SIGNATURE}{postrow.EDITED_MESSAGE}<br>
	  {postrow.PROFILE_IMG} {postrow.EMAIL_IMG} {postrow.[URL unfurl="true"]WWW_IMG}[/URL] {postrow.MSN_IMG} {L_BACK_TO_TOP}
        </div>
        <br>
  </div>      
	<!-- END postrow -->

When i use this, the posts overlap each other, you can tell because they have a break space from the top... if that makes sense

Ive tried changing relatives to absolutes and vice versa to no avail. Any way to stop the overlap and have a new post on a new "row"

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Upvote 0 Downvote
Your image doesn't exactly help - a picture of a nice sunny beach might though... source code would be more useful. :)

Pete.


Web Developer & Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
the source is above ;)

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Upvote 0 Downvote
thanks for the interest WartookMan, this question has now moved to thread215-784045 =)

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
864
bdwilcox
bdwilcox
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
794
tyutghf
tyutghf
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
929
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top