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.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS width question

    Here is an interesting question I have not been able to figure out. Say I want a box that is 800 pixels wide centered on the screen. The box is centered between two other boxes that run the height of the page. Is it possible using CSS to make the two outside boxes the border the main box "shrinkable" so that if you were to make the window smaller, the outside boxes would shrink?

    Obviously what I am trying to do is make the main box show up fine at all resolutions.....

    Thanks for any feedback.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Here's one way to try it... Adjust to your taste.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks Richard! That is exactly what I was talking about.....

    I'm attaching a pic of what I am trying to do as far as layout, with side 1 and side 2 being the collapsable boxes and what is in between that being the 800 px main box - obviously I know it can be done with tables but I am sure I can do it with CSS as well (and should learn how). I'm doing the right thing by going with CSS (even considering the layout) right?
    Attached Thumbnails Attached Thumbnails CSS width question-sample.gif  

  • #4
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    It can be done with CSS, although if it were fixed-width it would make very very easy. If it were a liquid layout, then that would be somewhat difficult to get working. As for Richard's proposal, if the window is resized in Opera, the text just stretches out of both sides of the box.


  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well the center 800px box is fixed width.... even though the other 2 boxes are not...... does that make a difference?

  • #6
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Are you planning on having anything on the outer two boxes?

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No content in the 2 outer boxes no, just color - so basically it will look a little cooler if they boxes are there (on a higher res screen), but if the boxes were not there (on a 800x600 res) the main content box still would be.....

  • #8
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Well then logically, you could remove those outer boxes, and align the main content to the center by applying: "margin: 0px auto" to it. Set the background of the body to #xxx, and that would be all that you need to do.


    Easy as 3.141592653589.

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not sure if that will work though - if you look at the pic I provided (which is bad so bare with me), the very outside box all the way around is just the screen. But inside all those lines will be visible - so there is a line that stretches across the width of side box 1, across main box, and across side box 2. This happens on both the top and bottom.

    I am obviously new to CSS, but I don't think just aligning the main box to the center and removing those other 2 boxes can accomplish this.... maybe I am wrong?

  • #10
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Well you could then put the main fixed width box again aligned to the center inside a container that spans the width of the page, or just less, e.g. 95% if you don't want it to span the whole screen. After that add the border property to the container:

    Code:
    border-top: 1px solid #xxxxxx;
    border-bottom: 1px solid #xxxxxx;
    That should resolve the problem.

    If you want it to rest at a certain level from the top of the screen, adding a margin would do that for you.

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you are saying the container is basically the outside lines of the example picture from above....?

  • #12
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Yup. That should help it to work fine

  • #13
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a new picture that might better show what I am trying to do - but as I understand your last post, I changed the margin of the container then the lines wouldn't reach to the top of the page. The lines in question (that are outside of the 800px fixed width box) I have colored red. The lines inside the 800px box I have colored blue.... maybe I am just confusing myself but for some reason it didn't seem like this would work the way you suggested because the red lines stretch from the top of the screen to the bottom (100%) and from left to right (100%)..
    Attached Thumbnails Attached Thumbnails CSS width question-sample2.gif  

  • #14
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's my first attempt - not quite working.....

    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>3 Column Layout Test</title>
    	<style type="text/css">
    
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#wrapper	{
    		margin: 0;
    		position: relative;
    		width: 100%;
    		height: 100%;
    		}
    	
    	#maincontent{
    		width: 800px;
    		height: 100%;
    		position: relative;
    		top: 0;
    		margin-left:auto;
    		margin-right:auto;
    		border: 1px solid #ccc;
    		}
    	
    	#columnone	{
    		width: auto;
    		height: 100%;
    		background-color:#006699;
    		float:left;
    		margin-left:0;
    		margin-right:0;
    		}
    	
    	#columntwo	{
    		width: auto;
    		height: 100%;
    		background-color:#006699;
    		float:right;
    		}
    	</style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="columnone">Left Column</div>
    	<div id="maincontent">Main Content</div>
    	<div id="columntwo">Right Column</div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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