Results 1 to 6 of 6

Thread: Side by Side Divs

  1. #1
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Side by Side Divs

    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:
    Code:
    <!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>
    Last edited by lizat; 11-25-2009 at 06:02 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    u can use this code:
    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>

  3. #3
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by lizat; 11-25-2009 at 06:03 PM.

  4. #4
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    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.
    Code:
    *{
     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
    Last edited by monicasaha; 11-19-2009 at 11:40 AM.

  5. #5
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by lizat; 11-25-2009 at 06:03 PM.

  6. #6
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by lizat; 11-25-2009 at 03:30 PM. Reason: better information now

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •