Problem with positioning

Discussion in 'CSS' started by danzor, Feb 26, 2007.

  1. #1
    I am having problems with the positioning of the main content box in a pure CSS design. This is my first real attempt at at tableless design so i'm having a problem or two.

    I have positioned the main content box in the following way:
    #main {
    margin-top: 7px;
    background-color: #0000FF;
    width: 550px;
    position:absolute;
    margin-left: 174px;
    margin-right: 162px;
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 174px;
    margin-right: 162px;
    }
    
    Code (markup):
    The two navigation boxes are positioned on either side of it with float:right and left.

    The main div displays as intended in Firefox, but in IE the main div is mis-positioned.

    I have also specified a fixed with for the main div as setting it to 100% causes it to span the whole page and not the container div it is in.

    Here is an the page:
    http://69.41.171.40/dan/new/test.php
     
    danzor, Feb 26, 2007 IP
  2. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #2
    Try This
    
    #main {
    margin-top: 7px;
    background-color: #0000FF;
    width: 550px;
    }
    
    
    Code (markup):
    You don't need absolute positioning here. just float one in left,leave the middle one as it is and float the last one to the right :)
     
    nwk, Feb 26, 2007 IP
  3. danzor

    danzor Peon

    Messages:
    208
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The main div is now pushing down the right nav box. You can see here:
    http://69.41.171.40/dan/new/test.php

    Also, is there any way of getting around the fixed width div? I would like the div to be as wide as the space between the two nav boxes.

    Thanks.
     
    danzor, Feb 26, 2007 IP
  4. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    to make the main (centre) div be fluid and not have a specified width you have to alter your css to something like this:

    #bqcontainer {
    position:relative;
    width: 70%;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    margin: 0px auto;
    height: 1000px;
    background-color: #fff;
    }

    #leftnavdiv {
    width:150px; /*whatever you prefer */
    position:absolute;
    left:0;
    }

    #rightnavdiv {
    width:150px; /* whatever you prefer */
    position:absolute;
    right:0;
    }

    #centrediv {
    margin-left:150px; /* can be bigger if you want a margin between */
    margin-right:150px; /* can be bigger if you want a margin between */
    }


    and your HTML set up like this

    <div id="bqcontainer">
    <div id="leftnavdiv">aa</div>
    <div id="rightnavdiv">cc</div>
    <div id="centrediv">bb</div>
    </div>
     
    unitedrokz, Feb 26, 2007 IP
  5. danzor

    danzor Peon

    Messages:
    208
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks guys, works fine now!
     
    danzor, Feb 26, 2007 IP
  6. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #6
    If you want the main to automatically change its size so as to fit between the two bars try this
    
    #main {
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 154px;
    background-color: #0000FF;
    }
    
    Code (markup):
    and also put the div "rightbar" before "main" like this in your html code
    
                             <div id="rightnav">
    				<div class="box">
    				<img src="img/boxes/bulletins.png" alt="Bulletins"/>
    				....................................................... laborum.
    				<img src="img/boxes/bottom.png" alt="" />
    				</div>
    			</div>
    			<div id="main">
    			main content
    			</div>
    
    Code (markup):
    :)
     
    nwk, Feb 27, 2007 IP
  7. cr0n1cal

    cr0n1cal Active Member

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #7
    I have one similar problem but I can't post my link for your analyze. I tried some solutions with clear class, with some javascripts but no results.
    I think it's something wrong on my code but I don't know where I mistake.

    Thanks,
    Cr0n
     
    cr0n1cal, Feb 27, 2007 IP
  8. cr0n1cal

    cr0n1cal Active Member

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #8
    I've added my css code problem related in previous post.
    My wrapper is:

    .contents {
    	height: 100%;
    	width: 824px;
    	margin-left: auto;
    	margin-right: auto;	
    	text-align: left;
    }
    Code (markup):
    My left column is:
    #left {
    	float: left;
    	width: 175px;
    	min-height: 100%;	
    	background: #fff;
    	color: white;
    	border-right: 2px solid #e9e9ea;
    }
    Code (markup):
    My right column is:
    #right {
    	float: right;
    	width: 175px;
    	min-height: 100%;	
    	background:#fff;
    	border-left: 2px solid #e9e9ea;
    } 
    Code (markup):
    The middle column is:
    #middle {
    	float: left;
    	position: relative;
    	min-height: 100%;
    	width: 468px;
    	background: #fff;
    }
    Code (markup):
    I've tried more javascript solution, I've used one clear class
    .
    clear {
      	clear: both;
      	height: 0;
      	overflow: hidden;
    	line-height: 0;    
    	border: 0
    }
    Code (markup):
    but no results.

    I think I have one placement error for my columns, but I can't see where is my mistake.
    The code location is http://www.noemisworld.com/new_site/
     
    cr0n1cal, Feb 28, 2007 IP
  9. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #9
    In your html code put the divs in this order
    
    <div id="contents">
       <div id="left">
       </div>
       <div id="right">
       </div>
       <div id="middle">
       </div>
    <div class="clear">&nbsp</div>
    </div>
    
    Code (markup):
    And in your css code put this
    
    #contents {
    	width: 830px;    /* It should be large enough to accomodate its contents*/
    	margin-left: auto;
    	margin-right: auto;	
    	text-align: center;
    	border: 1px solid green;
    }
    #left {
    	float: left;
    	width: 175px;
    	background: #fff;
    	
    	border: 2px solid #e9e9ea;
    }
    
    
    #right {
    	float: right;
    	width: 175px;	
    	background:#fff;
    	border: 2px solid #e9e9ea;
    }
    
    
    
    #middle {
    	
    	
    	width: 468px;
    	background: #fff;
    }
    
    Code (markup):

    TIP If you have problems with alignment stuffs always put borders on your divs and you will see the problem..

    If you still have problem PM me your link . It would be easier to check it out directly...:)
    Nwk
     
    nwk, Mar 1, 2007 IP