www.webdeveloper.com
Results 1 to 6 of 6

Thread: Can I make a div touch the left side of the page with a centered fixed-width parent?

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Question Can I make a div touch the left side of the page with a centered fixed-width parent?

    Ok, so I have a container-type div with a max-width of 1024px and I have a div right above it that has 3 in-line links in it... I want the links to stay within that 1024px area but I want the background color to continue all the way to the left edge of the window.

    Can this be done?

    What I have is something like this and it isn't working at all for what I need. It looks great on a certain page-width but as soon as I bring it up to my big monitor the links are sliding out into the abyss.
    Code:
    .brownDiv a{
    	display:block;
    	display:inline-block;
    	text-align:center;
    	padding:5px 0;
    	margin: 1%;
    	width:32%;
    	max-width:256px;
    }
    .brownDiv{
    	text-align:right;
    	display:block;
    	display:inline-block;
    	width:75%;
    	background:rgb(98,37,14);
    	position:absolute;
    	left:0;
    }
    The main problem I'm having is when the window is wider than 1024px. I want it to span across 75% of the main container-type div, not of the whole page -- but then I also want it to be touching the left side of the window...

    Any help would be greatly appreciated.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,138
    I'm not sure I see what you want, but you could try something like:
    Code:
    <style>
     .brownDivContent { max-width:1024px; }
    </style>
    <div class="brownDiv">
    <div class="brownDivContent">
    (original content)
    </div><!-- end brownDivContent -->
    </div><!-- end .brownDiv -->
    In other words, use a containing div (.brownDiv) to show the background color the full width of the container, and use a nested div (.brownDivContent) to constrain the actual content to the width you want.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Quote Originally Posted by rtrethewey View Post
    In other words, use a containing div (.brownDiv) to show the background color the full width of the container, and use a nested div (.brownDivContent) to constrain the actual content to the width you want.
    That is very close to what I'm looking for, except that the background (and content) is supposed to be 75% of the container-width and the background is supposed to also be outside of the container and stretching all the way from the container to the left edge of the entire screen... so if your monitor is more than 1024px wide it will still be all the way to the left, but the buttons need to stay within the left 75% of the 1024px container.

    What I have now works great for screens less than 1024px wide, but when the screen is too wide the brownDiv covers up the logo that takes the other 25% of the container.

  4. #4
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    You just gave me an idea, though that I think I might try -- if I do the brownDiv as a 50% width and give the content a separate background and a margin of negative-12px (or however tall the div is) then that might work -- and I can make the "secondary" div hidden when it's not needed, such as when the screen is 1024px or less...

    Stand by, people. If it works I'll let you know & post the code.

  5. #5
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Well, it works, more or less, but now the container for the links is centered...


    Code:
    .brownDivSecondary{
    	text-align:right;
    	display:block;
    	display:inline-block;
    	width:50%;
    	padding:5px 0;
    	margin: -1.75em auto 0 0;
    	background:rgb(98,37,14);
    	position:absolute;
    	left:0;
    	z-index: -50;
    }
    .brownDiv{
    	width:75%;
    	display:block;
    	display:inline-block;
    	background:rgb(98,37,14);
    	text-align:right;
    	margin: 0 auto 0 0;
    }
    .brownDiv a{
    	display:block;
    	display:inline-block;
    	text-align:center;
    	padding:5px 0;
    	margin: 0 1%;
    	width:30%;
    }
    I'm guessing it's because the div that now contains the .brownDiv has text-align:center; on it.

    So, from fixing that (and centering the specific elements in that container that need to be centered instead) it seems to have fixed the issue.

  6. #6
    Join Date
    Mar 2011
    Posts
    1,138
    See if this is closer:
    Code:
    .brownDiv{
    	display:inline-block;
    	background:rgb(98,37,14);
    	margin: 0 auto 0 25%;
    }
    .brownDiv a{
    	display:inline-block;
    	text-align:center;
    	padding:5px 0;
    	margin: 0 1%;
    	width:30%;
    }
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles