SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: div width

  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div width

    I am struggling with div width.

    In the coding below, the perfect layout will be, shortCutDiv just takes 200px width, all leftover width will be assigned to bodyMain. But now I have to manually set width to bodyMain.

    How to work out, especially in different screen resolution ?

    Thanks.

    Code:
    html,body {
                    width: 100%;
                    height: 100%;
                    border: 0;
                    padding: 0;              
                    margin: 0;
    }
    
    <div id="bodyDiv">  		
      		<div id="shortCutDiv" style="margin-right:5px;float:left;display:true;width:200px;height:600px;border-right:1px solid lightgrey;">  			
      			<tiles:insertAttribute  name="shortcutDiv" />
      		</div>
      		<div id="bodyMain" style="float:left;padding-left:5px;height:600px;width:1000px;">  			
      			<div><tiles:insertAttribute name="body" /></div>
      		</div> 
      		<br style="clear:both;height:0px;"/> 		
    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Remove the float from bodyMain and just put a large left margin on it:


    Code:
    <div id="bodyMain" style="margin-left: 205px">
    I assume you are only using inline styles for demo purposes?

    Also, display: true; is not valid CSS, so just remove it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, it works. I am not sure it will work in different PC and different screens.

    Could you please explain why you "put a large left margin" ? is it a bug ?

    I have tried to write a body event to calculate its width, but it is always not accurate, don't know why.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by czy11421 View Post
    thanks, it works. I am not sure it will work in different PC and different screens.

    Could you please explain why you "put a large left margin" ? is it a bug ?

    I have tried to write a body event to calculate its width, but it is always not accurate, don't know why.
    No, no bug; this is a very standard layout method, and is very reliable. bodyMain is essentially full width, so you don't put any width on it. But putting a left margin that is the width of the floated div gives that floated div room to sit beside bodyMain.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •