Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2005-03-12
18
Medium Priority
?
197 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
  • 7
  • 3
  • 3
  • +3
16 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

564 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