?
Solved

2 DIVs side by side for content areas...?

Posted on 2005-03-12
18
Medium Priority
?
192 Views
Last Modified: 2010-04-09
http://www.mlaz.pwp.blueyonder.co.uk/images/problem.jpg

What i need is inbetween top and bottom edge, 2 divs side by side that can be edited seperately. I've tried putting left content div, then right inside that and making left content the width of both together, but then i can only edit the whole width of the left content instead of just the visible that the user can see.

But if possible, i also want the left and right to always be equal in height, like if there is more content in one, the other will automatically be the same size.

One other problem i had, when i got the left and right content seperate, the right would never go on the same level as the left, it always started where the left ended. I'm sure its just the way i have my divs arranged.

if you need any more info let me know...thx
0
Comment
Question by:Tech0rz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 3
  • +3
18 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 172 total points
ID: 13526697
Two divs side by side

<div style="width:370px;height:100%;float:left;">Div 1<br>Div 1<br>Div 1<br>Div 1<br>Div 1<br></div>
<div style="width:370px;height:100%;float:left;">Div 2</div>
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 164 total points
ID: 13526894
Height 100% does not work for all browsers depending on doctype.

You have to setit with script at load time:

<div id ="div1" style="width:370px;float:left;">Div 1<br>Div 1<br>Div 1<br>Div 1<br>Div 1<br></div>
<div id="div2" style="width:370px;float:left;">Div 2</div>

<script type="text/javascript">
function setHgt()
{
   hgt=Math.max(document.getElementById('div1').offsetHeight,document.getElementById('div2').offsetHeight);
document..getElementById('div1').style.height=hgt+'px');
document..getElementById('div2').style.height=hgt+'px');
}
onload=setHgt;
</script>

Cd&
0
 
LVL 3

Expert Comment

by:farkit
ID: 13526897
           <div style="width:300px; background-color:red; float:left;">Left Div</div>
            <div style="width:300px; float:left; background-color:blue;">Right Div</div>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Tech0rz
ID: 13526943
ok note taken thanks.

one other thing, after i got the content divs sored, i added the bottom edge. using float:bottom; it wasn't displaying properly. can you tell me why float:left; made it perfect height and position wise?

p.s. COBOLdinosaur

document..getElementById('div1').style.height=hgt+'px');

'px' = the height i want in pixels?   With this script, does it mean i have to manually adjust each pages div heights according to how much content i have?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13526983
If you do not give a div a height it will automatically size to content.  However if you are going to need div of the same height then they are not going to be that unless you set the height of both to the height of the tallest one.

If it is somhow critical to the app or site that divs be the same height then that is how you insure it  reliably.  Personally, I very rarily find a situation where I want to override the natural behaviour of the divs; but I do not use grid layouts, and don't want the grid look you get when things are sized to match the size of something else.  That makes pages boring; but that is just my opinion.

Cd&
0
 

Author Comment

by:Tech0rz
ID: 13526992
also, why when i have padding in a div, it somehow thinks that the width is increasing causing the other div to go underneat it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13527008
>>> it somehow thinks that the width is increasing causing the other div to go underneat it.

In IE right?  A simple defective implementation of the standards.

Cd&
 
0
 

Author Comment

by:Tech0rz
ID: 13527016
yea in IE...its fairly important that there is some kind of padding inside the div so the text isn't touching the sides. how can i acheive this effect?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13527025
Put in the padding and reduce the width so IE does not mess it up.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13527030
BTW,

If it is that easy to mess up, then it is going to broken for most user anyway.  You shoud be using percentage widths otherwise it will bet messeed up by changes in screen side resolution ,and user prference changes.  You cannot just look at the pages with personal settings, you have to look at it the way other users are going to be viewing it.  Gtting it to render correctly on your computer merely means it works on your computer , there are a hundred different variations that a page can come up against, that will affect rendering.

Cd&
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13531036
For two side-by-sides, have you tried putting the DIVs in separate tables, each within a <TD> of a main table?

Batalf -- I don't understand your code?

CD& -- if you fill one divide with an html subpage, there is no way to get this to come out right if both divides are on the one line (or even in the one table) correct?  As I see it, you need an Iframe for that, no?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13531374
div is short for division not divides; and you don't need an iframe.  you just need correct stying applied by dynamic scripting on the divs.  Suggesting tables for this kind of layout goes 100% against the standards recommendations of W3C.  

When Tech)rz finishes explorign the possibilities they will be back to what I already posted.

Cd&
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13537174
Cd& -- clearer explanation --  

a normal link can put an html page into an iframe without any scripting at all, but I don't see this is possible with DIVs, especially ones side-by-side, without dynamic scripting that is browser specific...

sorry for not being clearer.  Can open a Q if you want to discuss further...

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13537304
The primary purpose of an iframe is to allow dynamic swapping of content.  As that is not what they are trying to do; using an iframe would just make the page more complex, and we would still be left with the same sizing issues.

Cd&
0
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 164 total points
ID: 13537918
If I understand correctly, you want to have a two column design. The reason you want the columns to stretch to the same height, must possibly be of graphic origin.

It would be better to just use two left floating divs (or a left and a right floating one for that matter) and have a clearing div below both of them to get the container division to stretch to the correct height.

The graphical concerns come into play after the columns are working, as this would be the of less importance.

In my opinion you could just work with some code like the one below:

<div id="containerdiv">
  <div id="leftcol" style="width:50%;float:left">Left col contents</div>
  <div id="rightcol" style="width:50%;float:right">Right col contents</div>
  <div style="clear:both;"></div>
</div>

You would then use a strict doctype, to force IE into strict mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

-r-
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13540028
Roonaan --

I like your idea, will have to try that with my problem too.  If interested, drop in and add some ideas --

 http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21350357.html
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question