Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    3 inline horizontal boxes.... width question

    I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. There is probably an easier or cleaner way to do this but this is what I have so far:

    CSS:

    #box1 {
    width:70px;
    height:120px;
    text-align:right;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    position:absolute; top:250px; left:0px;
    }

    #box2 {
    width:70px;
    height:120px;
    text-align:right;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    position:absolute; top:250px; left:97px;
    }

    #box3 {
    width:600px; <--------(WIDTH IN QUESTION)
    height:120px;
    text-align:right;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    position:absolute; top:250px; left:194px; right:0px;
    }

    HTML:

    <body>
    <div id="box1">TEST</div>
    <div id="box2">TEST</div>
    <div id="box3">TEST</div>
    </body>

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I havent used tables in a while so I am a bit rusty.

    Have you tried giving the table itself a width of 100%. If it's the full width of the screen, and the two cells are fixed, then perhaps the third would stretch across?

    OR

    have you tried putting something in the third cell and giving it margin : auto auto; attributes in your css? Thise are the first two that I would try.

    hth
    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, block level elements, by default, inherit the width of their containing element unless told otherwise. So try this:
    Code:
    #box3 {
    width: auto /* expands to it's container, the body */
    height:120px;
    text-align:right;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    position:absolute; top:250px; left:194px; right:0px;
    }
    Should work. Hope this helps,

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yeah, I tried the auto width on the 3rd box earlier and it looks perfect in firefox but in ie it is just a short little box...... any ideas?

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, in IE the absolute positioning-- since it takes the element out of flow-- makes it impossible to use "auto". Same for if you float it. To tell the truth I'm not sure what the spec is on that, so I don't know if IE is right or wrong on this one...

    I'd use a method that kept the last box "in flow," such as floating the other two boxes left:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	#left, #box1	{
    		float: left;
    		}
    		
    	#box1, #box2, #box3 {
    		position: relative;
    		top: 250px;
    		width:70px;
    		height:120px;
    		text-align:right;
    		padding:10px;
    		border: 1px solid gray;
    		font-size:10px;
    		}
    
    	#box3	{
    		width: auto;
    		}
    		
    	</style>
    </head>
    <body>
    	<div id="left">
    		<p id="box1">TEST</p>
    		<p id="box2">TEST</p>
    	</div>
    	
    	<p id="box3">TEST</p>
    </body>
    </html>
    I used p instead of div just to illustrate where the containers where. Maybe this will work for you?

    Edit:
    Auuuuugrle... never mind! This does horrible things in FF. The general idea might work, though...

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hmmmmm - I tried floating the first 2 boxes left but it still looks the same (using auto for the third box width) - fine in Firefox and just a skinny third box in IE....

    Any other ideas?

    EDIT:

    Also, and maybe this is a clue somehow but if I set the text-align property in the 3rd box to left, it shows up in Firefox the same as in IE (as a not very wide box instead of taking up the width of the rest of the page...)
    Last edited by niemie; 03-02-2005 at 09:02 PM.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#box1, #box2, #box3	{
    		position: relative;
    		top: 250px;
    		width:70px;
    		height:120px;
    		text-align:right;
    		padding:10px;
    		border: 1px solid gray;
    		font-size:10px;
    		}
    	
    	#box1, #box2	{
    		float: left;
    		margin-right: 5px;
    		}
    
    	#box3	{
    		width: auto;
    		margin-left: 194px;
    		}
    		
    	</style>
    </head>
    <body>
    		<p id="box1">TEST</p>
    		<p id="box2">TEST</p>
    		<p id="box3">TEST</p>
    </body>
    </html>
    Same idea. Keep the last box "in flow," and adjust the layout with a touch of margin magic. Works in both IE and FF... IE might need a hack or two to get your pixel-perfect layout.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    THANKS!

    Ok that basically works (althought Dreamweaver doesn't know what the hell is going on, lol) - now the only "problem" is I really don't want any margin/space between the far left of the 1st box and the far right of the 2nd box to the edge of the screen..... any work arounds you can think of? I am trying to make the whole thing flow in a straight line across the screen...does that make sense?

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Have you tried, say, adjusting the margins?

    http://www.w3schools.com/css/css_reference.asp#margin
    http://www.w3schools.com/css/css_reference.asp#padding

    You've just got to play around with those numbers to make it work for you.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    nevermind - I just didn't see that you had already set the padding and margins to zero for the page, that works. The only trick I need to figure out is how to make the 3rd box's left margin show up the same in both IE and Firefox..... for some reason they don't count the same as far as pixels go. What works in one does not work in the other...

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    ahh... the freakin' glory that is IE. It's adding a 3px bump to each element (a known bug when floating... see http://www.positioniseverything.net/...reepxtest.html for more). You can use various hacks to send IE its own rules; I used a little negative margin to put everything in place:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#box1, #box2, #box3	{
    		position: relative;
    		top: 250px;
    		width:70px;
    		height:120px;
    		text-align:right;
    		padding:10px;
    		border: 1px solid gray;
    		font-size:10px;
    		}
    	
    	#box1, #box2	{
    		float: left;
    		border-width: 1px 0 1px 1px;
    		}
    
    	#box3	{
    		width: auto;
    		margin-left: 182px;
    		}
    
    	* html #box3	{
    		margin-left: -3px;
    		}
    	
    	* html #box2	{
    		margin-right: -3px;
    		}
    	
    	</style>
    </head>
    <body>
    		<p id="box1">TEST</p>
    		<p id="box2">TEST</p>
    		<p id="box3">TEST</p>
    </body>
    </html>
    I think this is the effect you're going for.

  • #12
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    man.... almost but not quite. The IE hacks make it hard to get the equal spaces in between the second and third box. I'm attaching a pic from how it looks in Firefox which is the way i want it to look in IE as well but can't quite get it too... The dark outer edges represent the edges of the browser window.


  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by niemie
    The IE hacks make it hard to get the equal spaces in between the second and third box.
    They do?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#box1, #box2, #box3	{
    		position: relative;
    		top: 250px;
    		width:70px;
    		height:120px;
    		text-align:right;
    		padding:10px;
    		border: 1px solid gray;
    		font-size:10px;
    		}
    	
    	#box1, #box2	{
    		float: left;
    		margin-right: 5px;
    		}
    
    	#box3	{
    		width: auto;
    		margin-left: 194px;
    		}
    
    	* html #box3	{
    		margin-left: -3px;
    		}
    	
    	* html #box2	{
    		margin-right: 2px;
    		}
    
    		
    	</style>
    </head>
    <body>
    		<p id="box1">TEST</p>
    		<p id="box2">TEST</p>
    		<p id="box3">TEST</p>
    </body>
    </html>

  • #14
    Regular Coder musher's Avatar
    Join Date
    Jan 2005
    Location
    Minnesota
    Posts
    203
    Thanks
    0
    Thanked 0 Times in 0 Posts
    niemie, thanks for making this post, I hope you dont mind a question here for rmedek or one of the other guys.

    rmedek
    Great example thanks, i've been looking at other examples of this, and yours finaly turned on the light bulb. To take your example one step further how would you set it up with non-static heights, but all boxes would have the same height.
    IE below: box one has background color only 1 line of text, box 3 has 12 lines of text (which can vary). And set it up so box 1 has same height as box 3.

    I hope this makes sense.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#box1, #box2, #box3	{
    		position: relative;
    		top: 10px;
    		width:70px;
    		height:120px;
    		text-align:right;
    		padding:0px;
    		border: 1px solid gray;
    		font-size:10px;
    		}
    	
    	#box1, #box2	{
    		float: left;
    		margin-right: 5px;
    		}
    
    	#box1	{
    	  background-color: green;
    		}
    
    	#box2	{
    	  background-color: yellow;
    		}
    
    	#box3	{
    	width: auto;
    	margin-left: 194px;
    	  background-color: red;
    		}
    
    	* html #box3	{
    		margin-left: -3px;
    		}
    	
    	* html #box2	{
    		margin-right: 2px;
    		}
    
    		
    	</style>
    </head>
    <body>
    		<p id="box1">TEST</p>
    		<p id="box2">TEST</p>
    		<p id="box3">
    		<br>line1<br>line2<br>line3<br>line5<br>line6<br>line7<br>line8<br>line9<br>line10<br>line11</p>
    </body>
    </html>
    Thanks
    Jim M

    "Lord, help me to become the person my dog thinks I am" - Dawn Ewing
    "If you must know. Yes, I do enjoy running after the dog sled when I fall off" - Me

    www.huskyzone.com -- Woodland Siberians

  • #15
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well I got it up and it works (code below) - I guess I am having trouble figuring out when something is a glitch in IE....

    I know have a "logo" class I am going to place text in inside the 3rd box, but the space between the text and the colored boxes inside the third box differs between IE and Firefox. I want to do this the right way, and it looks like I want it to in IE as far as the spacing between the text and the colored boxes, but there is extra space in Firefox.....


    Code:
    CSS:
    
    body {
     margin:0;
     padding:0;
     background-color:#454444;
     }
     
     #wrapper {
     float:left;
     width:100%;
     margin-top:245px;
     }
     
     #b1, #b2, #b3 {
     height:150px;
     border:1px solid;
     border-color: rgb( 86, 84, 84); 
     margin:5px 0;
     background-color:#403C3C;
     }
     
     #b1, #b2 {
     width:80px;
     float:left;
     margin-right:5px;
     }
     
     #b1 {
     border-left:0;
     }
     
     #b3 {
     border-right:0;
     margin-left:173px; /*This line changes the 3rd box spacing in Firefox - beware!!*/
     }
     
     * html #b2 {
     margin-right:2px;
     }
     
     * html #b3 {
     margin-left:0;
     }
    
    #orange, #purple, #green {
    position: absolute;
    top: 270px;
    width:35px;
    height:35px;
    border: 1px solid;
    border-color:#222222;
    font-size:9px;
    }
    
    #orange {
    left: 375px;
    background-color:#DB7B4C;
    }
    
    #purple {
    left: 417px;
    background-color:#a3a2ca;
    }
    
    #green {
    left: 459px;
    background-color:#A8A857;
    }
    
    #logo {
    position: absolute;
    top: 315px;
    left: 190px;
    width:305px;
    height:75px;
    text-align:right;
    }
    
    .concepts {
    font-family: Verdana, Arial, sans-serif;
    font-size:21px;
    font-stretch:ultra-condensed;
    font-weight:bold;
    color:#888888;
    }
    
    
    
    HTML:
    
    <div id="wrapper">
    
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
    <div id="orange"></div>
    <div id="purple"></div>
    <div id="green"></div>
    <div id="logo"><h1 class="concepts">Logo Text Here</h1></div>
    
    </div>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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