Link to home
Start Free TrialLog in
Avatar of Tech0rz
Tech0rz

asked on

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

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
ASKER CERTIFIED SOLUTION
Avatar of Batalf
Batalf
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of farkit
farkit

           <div style="width:300px; background-color:red; float:left;">Left Div</div>
            <div style="width:300px; float:left; background-color:blue;">Right Div</div>
Avatar of Tech0rz

ASKER

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?
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&
Avatar of Tech0rz

ASKER

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.
>>> 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&
 
Avatar of Tech0rz

ASKER

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?
Put in the padding and reduce the width so IE does not mess it up.

Cd&
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&
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?
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&
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...

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&
SOLUTION
Avatar of Roonaan
Roonaan
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Roonaan --

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

 https://www.experts-exchange.com/questions/21350357/dynamic-Iframe-height-or-Div-no-scripting.html