SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Child elements matching parents width - Not window

    Hey,

    Here's an image explaining what i'm trying to achieve:
    http://img2.freeimagehosting.net/uploads/410f36ee5d.gif


    The red block is a wrapper element matching the browsers windows dimensions,
    The orange block is a header with width: 100%;
    The green block is a element with a defined width.

    I need the wrapper to extend to include the green block as well as make the orange block match that width, and not the window's width when smaller than the green block.

    It seems easy.. but i'm stumped.

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I am getting you, something like this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
    <head>
      <meta content="text/html; charset=UTF-8"
     http-equiv="content-type" />
      <title>test</title>
      <style type="text/css" media="screen">
    * { margin: 0; padding: 0; }
    #wrapper { overflow: hidden; border: 4px solid red; }
    #header { background: orange; height: 100px; }
    #content { background: green; width: 2000px; height: 300px; }
      </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <p>this is content</p>
    </div>
    </div>
    </body>
    </html>

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Almost,

    But we've lost the rest of #content,

    I'm wanting a scrollbar to appear when the width is less than #content
    And i'm wanting #header to expand to occupy #wrapper's width and not match the window's width.

    Header and content should always have the same width.. unless header is greater than 2000px wide.

    Thanks,

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You need to set a width somewhere on the wrapper to make a scrollbar. I think. Give it a max-width of 2000px (or what you want), and give the green something bigger. The wrapper must stop at that width but the green can keep going. I tried it in FF and a scrollbarr appears. Making the window smaller than the 1000px I set makes the border of the wrapper (and thus orange header too) shrink with the screen.

    Same as brandaggio's but with widths:
    http://stommepoes.jobva.nl/Tests/markbrowntest.html

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Nope, the wrapper and header need to expand to the width of the green block.

    I'm sure there's way.. it's just finding the will that's the tricky part.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	background-color: #FF0000;
    	padding: 10px;
    	min-width: 900px;
    }
    #header {
    	height: 100px;
    	background-color: #FFA500;
    }
    #fixed-block {
    	background-color: #008000;
    	width: 900px;
    	height: 300px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">Header content here</div>
    	<div id="fixed-block">Fixed width block</div>
    </div>
    </body>
    </html>

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hey Centauri,

    Thanks, that does indeed meet the initial requirements I laid out.. But I need to change those requirements

    The wrapper can't know about it's contents width, the width of the content will change from page to page and I need the header and wrapper to adapt with it.

    Well done though, it did meet my requirements.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    But I need to change those requirements
    You just want to make things more difficult

    How about
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	background-color: #FF0000;
    	padding: 10px 0;
    	float: left;
    	min-width: 100%;
    }
    #header {
    	height: 100px;
    	background-color: #FFA500;
    	margin: 0 10px;
    }
    #fixed-block {
    	background-color: #008000;
    	width: 900px;
    	height: 300px;
    	margin: 0 10px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">Header content here</div>
    	<div id="fixed-block">Fixed width block</div>
    </div>
    </body>
    </html>
    then?

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Centauri View Post
    You just want to make things more difficult

    How about ...then?
    You have earned my kudos and admiration once again

    Cheers,

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    But, it doesn't work in IE

    For the header to function it can't have 'Layout' so you need to remove the height. And IE6 doesn't expand 100&#37; as it doesn't understand min-width and as it's floated is shrink wrapping the contents.
    Giving IE6 width: 100%; makes the header match the windows width.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	background-color: #FF0000;
    	padding: 10px 0;
    	float: left;
    	min-width: 100%;
    }
    * html #wrapper {
      width: 100%;
    }
    #header {
    	background-color: #FFA500;
    	margin: 0 10px;
    }
    #fixed-block {
    	background-color: #008000;
    	width: 900px;
    	height: 300px;
    	margin: 0 10px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">Header content here</div>
    	<div id="fixed-block">Fixed width block</div>
    </div>
    </body>
    </html>
    Hmmm

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want something simple to work in IE6 ??!!!!???
    Now your'e asking the impossible !!

    Seriously, though, I have no idea how you may tackle that .....

    I would assume a javascript width:expression, but I'm not sure how you would write that.

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Where Superman?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Not sure if i'm understanding exactly what you want but this seems to fill the criteria.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
        margin: 0;
        padding: 0;
    }
    #wrapper {
        background-color: #FF0000;
        padding: 10px 0;
        float: left;
        min-width: 100&#37;;
    }
    #header {
        background-color: #FFA500;
        margin: 0 10px;
    
    }
    #fixed-block {
        background-color: #008000;
        width: 900px;
        height: 300px;
        margin: 0 10px;
    }
    * html #header span{float:right;width:1px}
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    
        <div id="header">Header content here<span></span></div>
        <div id="fixed-block">Fixed width block</div>
    </div>
    </body>
    </html>

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A right-floated span to force the 100&#37; minimum width - VERY clever !

    I note that when the width reduces, though, the span drops and causes a gap between header and content block, but it looks like making it a zero height works fine :
    Code:
    * html #header span{
    	float:right;
    	width:1px;
    	height: 0px;
    	overflow: hidden;
    }

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can even get rid of the width
    Code:
    * html #header span{
        float:right;
        width:0px;
        height:0;
        overflow:hidden;
    }

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Cheers Paul some of the hoops we need to jump through to appease IE..

    I feel just like Lois Lane

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mark
    I feel just like Lois Lane
    But where will you find one at this time of night

  18. #18
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just my 2 cent, but I can't center it.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	text-align: center;
    	background-color: #FFF;
    }
    #equlizer {
    	position: absolute;
    	left: 50px;
    	top: 0;
    	padding: 10px;
    	background-color: #999;
    }
    #header {
    	background-color: #F99;
    }
    #flexiblecontent {
    	float: left;
    	margin: 0px 0 0 0;
    	height: 400px;
    	white-space: nowrap;
    	background-color: #9F9;
    }
    #footer {
    	clear: left;
    	background: wheat;
    }
    </style>
    </head>
    <body>
    	<div id="equlizer">
    		<div id="header">Header, content wide</div>
    		<div id="flexiblecontent">Flexible content Flexible content Flexible content Flexible content Flexible content</div>
    		<div id="footer">Footer</div>
    	</div>
    </body>
    </html>
    Happy ADD/ADHD with Asperger's

  19. #19
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) I have no idea what this has to do with the original thread .....

    2) If you want to centre something, don't absolutely position it ...

  20. #20
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Point taken!
    Happy ADD/ADHD with Asperger's

  21. #21
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Must have misunderstod the original question?

    Thought it was about the child set parent that sets siblings width, witch seems (to a newbe) could be done several ways if siblings doesn't has layout.

    Please correct me again if I'm wrong.
    Happy ADD/ADHD with Asperger's

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Holy crap.
    A right-floated span to force the 100&#37; minimum width - VERY clever !
    And this unrelated thread just answered the question as to why my first page was awesome in all browsers but then got float-shrink-wrap on the follow-ups... I had a right float on first page only : )

    Aw, foo.

    *Edit: wheat's a colour? I thought it was food.

  23. #23
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I still need some more help making this work in the layout I'm working on:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
        margin: 0;
        padding: 0;
    }
    body {
    	background-color: #ADADAD;
    	font-family: Helvetica,Arial,sans-serif;
    	font-size: 80&#37;;
    }
    table { border-collapse: collapse }
    td { vertical-align: top }
    img { border: none }
    #wrapper {
        float: left;
        min-width: 100%;
    }
    #wrapper .inner {
    	margin: 0 10px;
    	border: 1px solid #818181;
    	background: #F2F2F3;
    	padding-bottom: 10px;
    	min-height: 0;
    }
    * html #wrapper .inner {
    	height: 1%;
    }
    #header {
        background: #3D61B1;
        float: left;
        width: 100%;
    }
    #title {
    	color:white;
    	float:left;
    	font-family:"Helvetica 55 Roman",Helvetica,Arial,sans-serif;
    	font-size:20px;
    	font-style:normal;
    	font-weight:normal;
    	padding-left: 10px
    }
    #subheader {
    	background: #7D96AC;
    	border-bottom:1px solid #717F8E;
    	border-top:1px solid #717F8E;
    	float: left;
    	padding: 2px;
    }
    #subheader img {
    	vertical-align: middle;
    }
    #fixed-block {
        background-color: #008000;
        width: 600px;
        height: 300px;
        color: #fff;
        padding: 10px;
    }
    * html #header span {
        float:right;
        width:0px;
        height:0;
        overflow:hidden;
    }
    #content {
    	padding: 10px 10px 0;
    }
    #menu {
    	background:#B9D5FF;
    	width: 200px;
    }
    #menu .inner {
    	width: 200px;
    	border: none;
    	background: transparent;
    	margin: 0;
    	padding: 0;
    }
    #footer {
    	text-align: right;
    	padding-right: 10px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div class="inner">
        <div id="header">
    		<div id="title">
    			<img src="a.gif" height="43" id="icon">
    			Really Useful title
    		</div>
        	<img style="float: right" src="b.gif" width="148" height="43" alt="Logo">
        	</div>
        <div id="subheader">
          <div id="menuItems" style="float: left">
    		<p>Over on the left</p>
    	  </div>
    	  <div id="quickSearch" style="float: right">
    	      <input name="globalQuickSearch" value="Quick search" class="globalQuickSearch" type="text"> <img src="c.gif" alt="Go" height="19" width="31">
    	  </div>
    	  <div id="recentItems"style="float: right">
    		  <select name="historySelector">
    			  <option value="">Recent items</option>
    			  <option>asdf asdf asdf asdf </option>
    			  <option>asdf asdf asdf asdf </option>
    			  <option>asdf asdf asdf asdf </option>
    			  <option>asdf asdf asdf asdf </option>
    			  <option>asdf asdf asdf asdf </option>
    			  <option>asdf asdf asdf asdf </option>
    		  </select>
    	  </div>
    	  <img src="d.gif" id="printIcon" style="float: right" alt="Printable version" onclick="printPage()">
        </div>
        <table style="width: 100%; float: left">
        <tr>
        <td id="content">
        	<div id="fixed-block">Big bad block shouldn't kill the layout</div>
        </td>
        <td id="menu">
        <div class="inner">
        	<p>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br></p>
        </div>
        </td>
        </tr>
        </table>
        <div style="clear: both;"></div>
      </div>
      <div id="footer">Footer</div>
    </div>
    
    </body>
    </html>
    I'm trying to get the header to do it's thing in IE6&7, interestingly enough IE5.5 displays this how I am wanting it to. And interesting to me at least, the header expands if in Quirks Mode.

    Thanks again, I promise I'll learn something from this

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Mark,

    This is a bit rough because I haven't got much time today but you would have to do something like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #ADADAD;
        font-family: Helvetica,Arial,sans-serif;
        font-size: 80&#37;;
    }
    table { border-collapse: collapse }
    td { vertical-align: top }
    img { border: none }
    #wrapper {
        float: left;
        min-width: 100%;
    }
    #wrapper .inner {
        margin: 0 10px;
        border: 1px solid #818181;
        background: #F2F2F3;
        padding-bottom: 10px;
        min-height: 0;
    }
    * html #wrapper .inner {
        float:left;
        display:inline;
    }
    #header {
        background: #3D61B1;
        text-align:right
    }
    #header h1{float:left;text-align:left}
    #title {
        color:white;
        float:left;
        font-family:"Helvetica 55 Roman",Helvetica,Arial,sans-serif;
        font-size:20px;
        font-style:normal;
        font-weight:normal;
        padding-left: 10px
    }
    #subheader {
        background: #7D96AC;
        border-bottom:1px solid #717F8E;
        border-top:1px solid #717F8E;
        padding: 2px;
    }
    #subheader img {
        vertical-align: middle;
    }
    #fixed-block {
        background-color: #008000;
        width: 600px;
        height: 300px;
        color: #fff;
        padding: 10px;
    }
    #content {
        padding: 10px 10px 0;
    }
    #menu {
        background:#B9D5FF;
        width: 200px;
    }
    #menu .inner {
        width: 200px;
        border: none;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    #footer {
        text-align: right;
        padding-right: 10px;
    }
    .min{float:right;width:0;height:0;overflow:hidden}
    #quickSearch{text-align:right;white-space:nowrap}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div class="inner">
            <div class="min"></div>
            <div id="header">
                <h1 id="title"><img src="a.gif" height="43" id="icon">Really Useful title</h1>
                <img src="b.gif" width="148" height="43" alt="Logo"> 
                        <div style="clear: both;"></div>
    
                </div>
            <div id="subheader">
                <div id="menuItems" style="float: left;clear:both">
                    <p>Over on the left</p>
                </div>
                <div id="quickSearch">
                    <select name="historySelector">
                        <option value="">Recent items</option>
                        <option>asdf asdf asdf asdf </option>
                        <option>asdf asdf asdf asdf </option>
                        <option>asdf asdf asdf asdf </option>
                        <option>asdf asdf asdf asdf </option>
                        <option>asdf asdf asdf asdf </option>
                        <option>asdf asdf asdf asdf </option>
                    </select>
                    <img src="d.gif" id="printIcon" alt="Printable version" onclick="printPage()">
                    <input name="globalQuickSearch" value="Quick search" class="globalQuickSearch" type="text">
                    <img src="c.gif" alt="Go" height="19" width="31"> </div>
            </div>
            <table style="width: 100%; float: left">
                <tr>
                    <td id="content"><div id="fixed-block">Big bad block shouldn't kill the layout</div></td>
                    <td id="menu"><div class="inner">
                            <p>menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                                menu<br>
                            </p>
                        </div></td>
                </tr>
            </table>
            <div style="clear: both;"></div>
        </div>
        <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    You have to use text-align right for those right elements because floats keep to the windows edge.

    It would probably be easier to use a min-width expression for ie or wrap the whole thing in a table.


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
  •