SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Problem with Comment Layout

    I am having problems modifying my Comments Layout.

    Here is a stripped down version of what I am having problems with now...
    Attachment 59324


    Why does the background-color for the class "commentBottom" set the background to Orange for the whole parent DIV?!

    (And also why does the Purple background-color for "userInfo" extend to the right underneath "userPost"?? Looks like the same problem...)


    I want it so that the following sub-areas can have their own distinctive colors:
    - commentBody

    or

    - userInfo
    - userPost


    and

    - commentBottom
    - commentWrapper


    Here is the HTML for it...
    HTML Code:
    	<div id="boxComments">
    		<h3>What Do You Think?</h3>
    			<p>To leave a comment, you need to...</p>
    
    			<div class="commentWrapper">
    				<div class="commentBody">
    
    					<div class="userInfo">
    						<a href="#" class="username">
    							<strong>username</strong>
    						</a>
    
    						<img class="noborder" src="/uploads/' . $photoName . '" width="100" alt="" />
    
    						<dl>
    							<dt>Joined:</dt>
    								<dd>date</dd>
    
    							<dt>Location:</dt>
    								<dd>location</dd>
    
    							<dt>Posts:</dt>
    								<dd>' . $posts . '</dd>
    						</dl>
    					</div>
    
    					<div class="userPost">
    						<span class="commentDate">Posted on: date</span>
    						<span class="commentNo">commentCount</span>
    						<p>$comments</p>
    					</div>
    				</div>
    
    				<div class="commentBottom">LOOK</div>
    
    				</div>

    Here are my styles...
    Code CSS:
    #boxComments .commentWrapper{
    /*	background-color:aqua;		/**/
    }
     
    #boxComments .commentBody{
    	float: left;
    	clear: both;
    	max-width: 640px;
    	margin: 20px 0;
    	background-color: #A0A;		/**/
    	border-top: 1px solid #333;
    }
     
    #boxComments .userInfo{
    	float: left;
    	width: 170px;		/**/
    	padding: 10px 0px 0 0;		/**/
    	font-size: 0.9em;
    	text-align: center;
    }
     
    #boxComments .userInfo a{
    	padding: 0 0.7em 0 0;
    	color: #0071D8;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
     
    #boxComments .userInfo dl{
    	margin: 0;
    	padding: 10px 0 0 0;
    }
     
    #boxComments .userInfo dt{
    	float: left;
    	width: 4.5em;
    	text-align: right;		/**/
    }
     
    #boxComments .userInfo dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }
     
    #boxComments .userPost{
    	float: left;
    	max-width: 430px;													/* 115px + 225px = 340px */
     
    																					/* FIX THIS */
    	min-width: 430px;		/**/
    	padding: 10px 20px 20px 20px;		/**/
    	font-size: 0.9em;
    	background-color: #F4F4F4;		/**/
    }
     
    #boxComments .commentDate{
    	display: inline-block;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentNo{
    	display: inline-block;
    	float: right;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentBottom{
    	margin:0;
    	padding: 0;
    	background-color: orange;		/**/
    }


    Hope that makes sense?!

    BTW, would I want to your position: relative here, and why or why not?

    Thanks,


    Debbie

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    As for the orange background...When you float something , and then have an unfloated element as an adjacent child (as with your example), the static content (the adjacent child) actulaly is taking up the full width of the parent. It's not recognizing the float is there really. In some regards. So what you're seeing isn't the orange background actually taking up the parents background. It's just that you have a margin set on the float (a top margin) which allows the orange background to seep over top of it. If you were to float the orange box as well, you would see this issue disappear completely. You have several options really. I just gave one .

    I'm not really seeing the 2nd issue. Both the user info and user post are being floated. This isn't the same issue (though to be honest I can't see what hte issue is?The purple isn't overlapping the gray )

    When you float everything (and avoid overlapping), allowing each section to have a different background is easy work.

    Most definitely not a place to use position:relative. It just doesn't have a place here. You are dealing with the structure of the page, and RP should have nothing to do with the overall structure .
    Off Topic:

    Someone needs to quote my post and post it, that way the OP can read it. I'm on her blocked list...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Would using Floats help?

    I'm still not understanding the behavior I'm seeing.

    Thanks,


    Debbie

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Someone please quote my post above.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    As for the orange background...When you float something , and then have an unfloated element as an adjacent child (as with your example), the static content (the adjacent child) actulaly is taking up the full width of the parent. It's not recognizing the float is there really. In some regards. So what you're seeing isn't the orange background actually taking up the parents background. It's just that you have a margin set on the float (a top margin) which allows the orange background to seep over top of it. If you were to float the orange box as well, you would see this issue disappear completely. You have several options really. I just gave one .

    I'm not really seeing the 2nd issue. Both the user info and user post are being floated. This isn't the same issue (though to be honest I can't see what hte issue is?The purple isn't overlapping the gray )

    When you float everything (and avoid overlapping), allowing each section to have a different background is easy work.

    Most definitely not a place to use position:relative. It just doesn't have a place here. You are dealing with the structure of the page, and RP should have nothing to do with the overall structure .
    Off Topic:

    Someone needs to quote my post and post it, that way the OP can read it. I'm on her blocked list...
    Debbie, read this ^
    TheRaptor - Joe

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,371
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Well, Ryan's explained the problem with the orange background. You need to float commentBottom to get it to wrap its contents. I'm guessing commentBottom should be below commentBody, so add a width (640px or whatever) to commentWrapper, which will force commentBottom onto a new line. You'll also need to float the parent div or add overflow:hidden to ensure it contains its children.

    If you set the purple background on .userInfo rather than on .contentBody, then it won't continue for the full width of the div.

    I'm not sure where you were thinking of using position:relative, but I agree with Ryan - don't.

    BTW, you're missing a closing </div> in the code you posted.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    the problem with the orange background. You need to float commentBottom to get it to wrap its contents.
    I did float it.


    I'm guessing commentBottom should be below commentBody,
    Right.


    so add a width (640px or whatever) to commentWrapper, which will force commentBottom onto a new line.
    I have widths set on .userInfo and .userPost


    You'll also need to float the parent div or add overflow:hidden to ensure it contains its children.
    The parent is floated.


    If you set the purple background on .userInfo rather than on .contentBody, then it won't continue for the full width of the div.
    Why does the purple on .userInfo appear to go the whole width of commentBody and thus go behind .userPost??

    (That was my key question in my original post)


    I'm not sure where you were thinking of using position:relative, but don't.
    Paul O uses position: relative a lot when laying out pages...


    Here is my updated code...
    HTML Code:
    	<div class="commentWrapper">
    		<div class="commentBody">
    
    			<div class="userInfo">
    				<a href="#" class="username">
    					<strong>DoubleDee</strong>
    				</a>
    
    				<img class="noborder" src="/uploads/' . $photoName . '" width="100" alt="" />
    
    				<dl>
    					<dt>Joined:</dt>
    						<dd>Jan 2012</dd>
    
    					<dt>Location:</dt>
    						<dd>Phoenix, AZ</dd>
    
    					<dt>Posts:</dt>
    						<dd>119</dd>
    				</dl>
    			</div>
    
    			<div class="userPost">
    				<span class="commentDate">Posted on: 2012-03-14 9:25am</span>
    				<span class="commentNo">#1</span>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			</div>
    		</div>
    
    		<div class="commentBottom">LOOK</div>
    	</div>

    Code CSS:
    #boxComments .commentWrapper{
    	float: left;
    	background-color: #FFFFCC;		/* Buff */
    }
     
    #boxComments .commentBody{
    	float: left;
    	margin: 20px 0;
    	background-color: #A0A;		/**/
    /*	background-color: #FFC;		/**/
    	border-top: 1px solid #333;
    }
     
    #boxComments .userInfo{
    	float: left;
    	width: 170px;		/**/
    	padding: 10px 0px 0 0;		/**/
    	font-size: 0.9em;
    	text-align: center;
    }
     
    #boxComments .userInfo a{
    	padding: 0 0.7em 0 0;
    	color: #0071D8;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
     
    #boxComments .userInfo dl{
    	margin: 0;
    	padding: 10px 0 0 0;
    }
     
    #boxComments .userInfo dt{
    	float: left;
    	width: 4.5em;
    	text-align: right;		/**/
    }
     
    #boxComments .userInfo dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }
     
    #boxComments .userPost{
    	float: left;
    	max-width: 430px;													/**/
    																					/* FIX THIS */
    	min-width: 430px;		/**/
    	padding: 10px 20px 20px 20px;		/**/
    	font-size: 0.9em;
    	background-color: #F4F4F4;		/**/
    }
     
    #boxComments .commentDate{
    	display: inline-block;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentNo{
    	display: inline-block;
    	float: right;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentBottom{
    	float: left;
    	margin:0;
    	padding: 0;
    	background-color: orange;		/**/
    }


    Here is what I am still not understanding...

    1.) Why does the purple extend all the way across .commentBody?

    2.) How can I make the shading Full-Height for .userInfo and .userPost? (It almost looks like .userPost is inside of .userInfo?!)

    3.) Why doesn't the orange background extend the whole width of .commentBottom (and .commentBody)?

    Thanks,


    Debbie

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,371
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I have widths set on .userInfo and .userPost
    Yes, and those widths are less than the full width of the viewport, so your floated .commentBottom has plenty of room to sit alongside them. If you want .commentBottom to sit underneath them, then you need to put a width on .commentWrapper, which contains those three divs, to constrain the overall width.

    Quote Originally Posted by DoubleDee View Post
    Why does the purple on .userInfo appear to go the whole width of commentBody and thus go behind .userPost??

    (That was my key question in my original post)
    Because, as I said before, you have that purple colour set on .commentBody, not on .userInfo.

    Quote Originally Posted by DoubleDee View Post
    Here is what I am still not understanding...

    1.) Why does the purple extend all the way across .commentBody?
    Because that's the div its applied to.

    Quote Originally Posted by DoubleDee View Post
    2.) How can I make the shading Full-Height for .userInfo and .userPost? (It almost looks like .userPost is inside of .userInfo?!)
    .userPost is inside .commentBody, which is where the purple is coming from.

    Quote Originally Posted by DoubleDee View Post
    3.) Why doesn't the orange background extend the whole width of .commentBottom (and .commentBody)?
    It does extend the full width of .commentBottom. Because the div is floated, it shrinks to fit its contents, so the orange extends the full width of the contents. If you want it to extend to the same width as .commentBody, then you need to set a width on it. You can set width: 100% to make it extend the width of the parent container.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    Paul O uses position: relative a lot when laying out pages...
    He may use it, but it's not using it as the structure. There's a huge difference in what you are thinking about doing, and what Paul actually does.

    Techno answered your other questions .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    TechnoBear,

    I think I got it figured out.

    Thanks for the help!


    Debbie

  11. #11
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,573
    Mentioned
    975 Post(s)
    Tagged
    14 Thread(s)
    I'm going to step in here and comment on the ridiculousness of this thread. Ryan, if Debbie is choosing to ignore you, don't help her out. Her loss.
    This quoting is just silly.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Say, one more thing while we are on the topic...

    What do I need to do to my code to make .userPost "fluid" and .userInfo a fixed width of 170px?

    Here is what I get when I minimize my browser...
    Attachment 59331


    As you can see, the User Post (i.e. Comments) are not fluid.


    Here is my updated code...
    HTML Code:
    	<div class="commentWrapper">
    		<div class="commentBody">
    
    			<div class="userInfo">
    				<a href="#" class="username">
    					<strong>DoubleDee</strong>
    				</a>
    
    				<img class="noborder" src="/uploads/' . $photoName . '" width="100" alt="" />
    
    				<dl>
    					<dt>Joined:</dt>
    						<dd>Jan 2012</dd>
    
    					<dt>Location:</dt>
    						<dd>Phoenix, AZ</dd>
    
    					<dt>Posts:</dt>
    						<dd>119</dd>
    				</dl>
    			</div>
    
    			<div class="userPost">
    				<span class="commentDate">Posted on: 2012-03-14 9:25am</span>
    				<span class="commentNo">#1</span>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			</div>
    		</div>
    
    		<div class="commentBottom">LOOK</div>
    	</div>

    Code CSS:
    #boxComments{
    	max-width: 640px;
    	margin: 0 auto;
    	margin: 40px auto;
    	padding: 0 20px 60px 20px;
    	border: 1px solid #333;
    }
     
    #boxComments:after{													/* Contain floats without overflow. */
    	content: "";
    	clear: both;
    	display: block;
    	height: 0;
    	font-size: 0;
    }
     
    #boxComments h3,
    #boxAddComment h3{
    	height: 20px;
    	margin: 0px -20px 10px -20px;
    	padding: 0.4em 10px 0.2em 10px;
    	text-align: left;
    	line-height: 1.4em;
    	font-size: 1em;
    	font-weight: bold;
    	color: #FFF;
    	background-color: #333;
    }
     
    /* Row of Buttons. */
    #boxComments ul{
    /*	list-style: none;		/**/
    	margin: 0 0 0 20px;		/**/
    /*	margin: 0px 0px 50px 20px;		/**/
    	padding: 0;
    }
     
    #boxComments ul li{
    	float: left;
    	margin: 5px 5px 0 0;
    	padding: 0;
    }
     
     
    #boxComments .commentWrapper{
    	width: 100%;	/**/
    	float: left;
    	background-color: #FFFFCC;		/* Buff */
    }
     
    #boxComments .commentBody{
    	width: 100%;	/**/
    	float: left;
    /*	margin: 20px 0;	/**/
    	background-color: #A0A;		/**/
    /*	background-color: #FFC;		/**/
    	border-top: 1px solid #333;
    }
     
     
    /* LEAVE THIS FIXED-WIDTH */
    #boxComments .userInfo{
    	float: left;
    	width: 170px;		/**/
    	padding: 10px 0px 0 0;		/**/
    	font-size: 0.9em;
    	text-align: center;
    	background-color: #9F9;		/**/
    }
     
    #boxComments .userInfo a{
    	padding: 0 0.7em 0 0;
    	color: #0071D8;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-decoration: none;
    }
     
    #boxComments .userInfo dl{
    	margin: 0;
    	padding: 10px 0 0 0;
    }
     
    #boxComments .userInfo dt{
    	float: left;
    	width: 4.5em;
    	text-align: right;		/**/
    }
     
    #boxComments .userInfo dd{
    	margin: 0 0 0 5em;
    	text-align: left;
    }
     
     
    /* MAKE THIS FLUID */
    #boxComments .userPost{
    	float: left;
    	width: 430px;
    /*	max-width: 430px;													/**/
    																					/* FIX THIS */
    /*	min-width: 430px;		/**/
    	padding: 10px 20px 20px 20px;		/**/
    	font-size: 0.9em;
    	background-color: #F4F4F4;		/**/
    }
     
    #boxComments .commentDate{
    	display: inline-block;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentNo{
    	display: inline-block;
    	float: right;
    	padding: 0 0 10px 0;
    	color: #AAA;
    }
     
    #boxComments .commentBottom{
    	float: left;
    	width: 100%;
    	margin:0;
    	padding: 0;
    	background-color: orange;		/**/
    }


    I used to know how to do "fluid" designs but I've been messing with my code and it keeps breaking.

    I have also been playing with FireBug but I'm admittedly stuck and could use some help.

    Thanks,


    Debbie

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Those styles you posted bear no relation to your HTML.

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,371
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Those styles you posted bear no relation to your HTML.
    You need to go back to the HTML in the original post and add in the missing lines with the all-important <div id="boxComments"> and then they match up.

    Debbie, it would really help (us and you) if you gave us the full picture at the start of what you're trying to achieve, then we won't keep wandering down the wrong paths.

    To make .userPost fluid, remove the float and the width, and add margin-left:170px. That should solve that problem.

    You can also remove the float and the width from .commentBottom, as they're no longer necessary in your updated version.

  15. #15
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    You need to go back to the HTML in the original post and add in the missing lines with the all-important <div id="boxComments"> and then they match up.

    Debbie, it would really help (us and you) if you gave us the full picture at the start of what you're trying to achieve, then we won't keep wandering down the wrong paths.
    Tell you what I'll do...

    Hopefully in the next several days I can publish my latest website and let you look at it in whole.

    I know I have more "Spring Cleaning" to do around what we have been discussing, and I think if you can see my entire working - or not! - website that would help. Right?


    To make .userPost fluid, remove the float and the width, and add margin-left:170px. That should solve that problem.
    Doh! I knew that?! Worked like a charm!


    You can also remove the float and the width from .commentBottom, as they're no longer necessary in your updated version.
    That isn't working like I want, but let me publish my code before we tackle that.

    Thank you,


    Debbie

  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,371
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    Hopefully in the next several days I can publish my latest website and let you look at it in whole.

    I know I have more "Spring Cleaning" to do around what we have been discussing, and I think if you can see my entire working - or not! - website that would help. Right?
    Now that sounds like an excellent idea.

    Quote Originally Posted by DoubleDee View Post
    Doh! I knew that?! Worked like a charm!
    Great - glad I could help.

    Quote Originally Posted by DoubleDee View Post
    You can also remove the float and the width from .commentBottom, as they're no longer necessary in your updated version.
    That isn't working like I want, but let me publish my code before we tackle that.
    Weird, because it's working fine for me. Have you double-checked for typos? (My no.1 cause of unexpected behaviour. )

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Now that sounds like an excellent idea.

    Great - glad I could help.

    Weird, because it's working fine for me. Have you double-checked for typos? (My no.1 cause of unexpected behaviour. )
    No, it's not that. It relates to your earlier comment...

    My website is getting to be fairly complex - at least to me - and what used to be easy to tweak is not much harder because one change HERE ends up throwing off things THERE (unless I get my code "tuned" better)!

    Like I said, maybe I can publish my entire code-base here shortly, and then you all can see exactly what I am seeing.

    Paul O'Brien was a real saint and helped me created a pretty studly layout last year.

    Now I want to go back and clean up the new things I've added so that they don't take away from HIS awesome design!

    Thanks,


    Debbie

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Doh! I knew that?! Worked like a charm!
    Adding a margin-left will give you the layout you asked for but there will be side effects if you leave it like that.

    If for instance in your main column you have floats that you want to clear then adding a clear:both will in fact see the element clearing the whole left side column instead.

    Just add this to see the effect.

    .userPost p{clear:both;}

    That is unusable in a real situation as you never know when you might want to float and clear something.

    The options are to nest an inner 100% wide floated element inside userPost which will then contain the clearing of any child floats to only that context. If you don't need visible overflow then you could use the overflow:hidden method and remove the margin-left and just use overflow:hidden.

    Code:
    #boxComments .userPost {
    /*margin-left:170px*/
    overflow:hidden
    zoom:1.0;/* let ie6 and 7 play */
    }
    There will be no need for the margin and no need for the extra element as overflow other than visible forces the element into a rectangular block that will sit next to a float and span all the available width. It's of no use if you need visible overflow but in most cases its fine. There will also be a problem if the element is squeezed tight and you may see it dropping under the side column at small screen sizes (which may be a benefit in some cases) unlike the margin-left method where the element will stay 170px from the left (but will still drop down in older IE).

    Which method you use depends on the criteria you need. The margin-left approach with an inner nested 100% wide float is the most robust but needs extra mark-up.

    There never is one way to do something as it all depends on what happens next.

    That isn't working like I want, but let me publish my code before we tackle that.

    Thank you,


    Debbie[/QUOTE]

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,923
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for chipping in your thoughts.

    If you don't mind, can you hold off on your comments until I can get my website posted online?

    Honestly I was getting lost in your explanation, and I think if everyone can see my final code/website it would be more efficient.

    Hopefully I can have things up next week.

    Thanks,


    Debbie


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
  •