Log in

View Full Version : Side by Side Divs


lizat
11-18-2009, 08:16 PM
Dear Dynamics,

I have a simple requirement as follows:

a containing div


a left hand div - don't want to specify width only right margin which will fill to the right hand div...
a right hand div - floats right & side by side with the left hand div, it contains a fixed width button

the left hand div will sometimes contain several rows of text. While is has only one line everything works fine and the two divs are side by side, when it is multiple lines the right hand div descends below the left hand div.

Any ideas how to solve this?

thank you........................ liz
________________________________________________________
This is the extracted code - note it is part of a much bigger thing & the colours are only for debugging purposes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

.lid112_column1
{
position:relative;
min-width:600px;
margin-left:10px;
margin-right:200px;
border: 2px solid #709502;
background-color:red;
max-height: 900px;
overflow: hidden;
}

.ST_resultstext
{
xposition:relative;
float: left;
background-color:#33FFFF;
margin: 5px;
margin-right: 160px;
}

.ST_buttons
{
position:relative;
float: right;
background-color:#33FFFF;
margin: 5px;
}

.ST_input_button
{
border: 2px outset #a8ff00;
text-align:center;
position: relative;
float: right;
width: 140px;
color:#a8ff00;
padding: 2px;
background:#709502;
border-color:#a8ff00;
text-align: center;
margin-bottom:10px;
display: inline-block;
}
.clearboth { clear:both;}
</style>
</head>

<body>

<div class="lid112_column1">

<div class="ST_resultstext">
<p>This is one line of text, and is copied to make more: This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more: </p>
</div>
<div class="ST_buttons" >
<input type="button" class="ST_input_button" value="button text1" /><br />
<input type="button" class="ST_input_button" value="button text2" />
</div><br />
<div class="clearboth"></div>

</div> <!-- end lid112_column1 -->


</body>
</html>
monicasaha
11-19-2009, 05:47 AM
u can use this code:


<style type="text/css">
*{
padding:0;
margin:0;
}

.lid112_column1
{
position:relative;
min-width:600px;
margin-left:10px;
margin-right:200px;
border: 2px solid #709502;
background-color:red;
max-height: 900px;
overflow: hidden;
padding:5px;
}

.ST_resultstext
{
position:relative;
background-color:#33FFFF;
margin-right:160px;
}
.ST_resultstext p{
font:normal 12px/15px Arial, Helvetica, sans-serif;
color:#000;
padding:5px;
}
.ST_buttons
{
position:absolute;
top:0;
right:0;
background-color:#33FFFF;
margin: 5px;
width:140px;
}

.ST_input_button
{
border: 2px outset #a8ff00;
text-align:center;
position: relative;
float: right;
width: 140px;
color:#a8ff00;
padding: 2px;
background:#709502;
border-color:#a8ff00;
text-align: center;
margin-bottom:10px;
display: inline-block;
}
.clearboth {
clear:both;
font-size:0;
line-height:0;
}
</style>
</head>

<body>

<div class="lid112_column1">
<div class="ST_buttons" >
<input type="button" class="ST_input_button" value="button text1" />
<br class="clearboth" />
<input type="button" class="ST_input_button" value="button text2" />
<br class="clearboth" />
</div>

<div class="ST_resultstext">
<p>This is one line of text, and is copied to make more: This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more:This is one line of text, and is copied to make more: </p>
</div>


</div>
lizat
11-19-2009, 08:15 AM
Dear monicasaha,

Thank you, it's always something simple isn't it!

If you have the time and you know the answer can you explain these things:

What is the effect of "position:relative" if there is no positioning defined - in your example it applies to ST_resultstext. I have commented it and everything still works as far as I can see. Does this do anything?
How & when does the global * style apply, I never quite understand this?
related to the global style I think... when I introduce the line <br class="clearboth" /> I also get a "space", which I don't want. When I have the code on it's own, and with the * style everything behaves perfectly. But when I introduce the code into a more complex page I get the space line. This may be to do with sequence of styles in relation to others. What should I look for (I have a number of style sheets the * style is in the main one near the top and it is loaded first. I did try chnaging the clearboth style to this: {clear:both; font-size:0; line-height:0; margin:0; padding:0;}, but didn't help.
It seems that having the left-block first followed by the right-block has no effect - at least in IE7 & FF3.5. You have used right then left is there a good reason for this?

I's nice to find a forum when people are pragmatic and helpful, not just good but superior!!!

thanks.............. liz
monicasaha
11-19-2009, 11:09 AM
I will answer you one by one as much as I know:

1. Position:relative makes no change to a div or any tag until and unless u put a div into it with position:absolute.

2.

*{
padding:0;
margin:0;
}


this makes all the tag use in html by default padding & margin zero.
u can also mention tags name and make them margin & padding zero.

3. When u use point 2 and make font-size:0;
line-height:0 with clear:both and add to <br/> . This wont take no extra space.

4. yah u r right... as the right div is positioned absolute with .lid112_column1 div, which is positioned relative, it will only understand the .lid112_column1 div.

Moreover if u place any div with positioned absolute without mentioning any div relative in it, then absolute div will make body as default relative positioned. top, left, right, bottom attributes will move the absolute div with respect to position relative div.

I have put left div later to right div as the left div has no specific width, so that it can take full width with margin-right, correctly viewed in all browsers.

Hope this things will help u further while working with css and html.


Thanks
Monica
lizat
11-20-2009, 12:05 PM
Dear Monicasaha,

Thank you for all the information! It's hard even with all the books and refernce material on the net to work out exactly what is what and it is usually only when I come to use something that I realise that although I understand in theory in practice there's more to it!

Just for the record the addition line I had introduced with the <br class="clearboth" /> was my error since I had it outside the dive that it applied to.

Many thanks................... liz
lizat
11-25-2009, 03:28 PM
Dear Monica and forum readers,

Have found one last thing that I want to tidy up, it is this: if the text is one or two lines the div with the buttons gets truncated (the bottom is chopped off so potentially the bottom button is not seen. I can't control the size of the text in my page - the data is a string based on the user selection so may be 1-3 lines I think and if they shrink the veiwport could be anything.

So is there anyway to make sure that the containing div is "pushed" to be a size to accommodate the buttons or the text whichever is the largest?

thank you................... liz