SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Percentage Widths and Floats

    Hey,

    I have the following section of code that I am having issues with:

    I have a container with a width of 95%

    within this container I have an alerts bar with a width of 100%

    under this I have an area that is displaying user information with a width of 50px; and is floated left

    I then have another area called text message that I would like the width to be 100% but it seems to go under the above box instead of next to it. Why?

    HTML:

    HTML Code:
    <div class="scheduledTop">
    				<h3>Scheduled Messages</h3>
    					<p class="alert">Alert Message Area</p>
    				</div>
    					<div class="scheduledCenter">
    						<p class ="alertMessage"><span class="bold">Important:</span> Your Account is set to Pacific/Auckland Time.  The Time is now <span class="bold">9:30AM</span> on <span class="bold">29th May 2012</span></p> <span class="close"></span>
    						<div class="userInformation">
    							<span class="userImage"><img src="_assets/images/ava.png" width="46" height="45" alt="Ava"></span>
    							<span class="bold">FROM:</span>
    							<p class="userDetails">123456789XXX</p>
    							</div>
    							<div class="textMessage">
    								content bro
    							</div>
    					</div>
    CSS:

    Code:
    .scheduledCenter{
    	width:100%;
    	min-height:100%;
    	padding:10px 0px 0 0px;
    }
    .scheduledCenter .alertMessage{
    	width:100%;
    	height:15px;
    	color:#3385B2;
    	background: #D1DEE8 url('../images/close.png') no-repeat 99% 8px;
    	border:3px solid #8099B4;
    	border-radius:3px;
    	padding:5px;
    }
    .scheduledCenter .alertMessage .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation{
    	float:left;
    	width:50px;
    	height:100%;
    	min-height:100%;
    	margin:10px 30px 0 0;
    }
    .scheduledCenter .userInformation .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation .userDetails{
    	padding:10px 0 0 0;
    }
    .scheduledCenter .userInformation .userImage img{
    	margin:0 0 10px 0;
    }
    .textMessage {
    	float:left;
    	width:100%;
    	position: relative;
    	background: #FFF;
    	border: 5px solid #000;
    }
    .textMessage:after, textMessage:before {
    	right: 100%;
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    }
    
    .textMessage:after {
    	border-right-color: #FFF;
    	border-width: 10px;
    	top: 50%;
    	margin-top: -10px;
    }
    .textMessage:before {
    	border-right-color: #000;
    	border-width: 17px;
    	top: 50%;
    	margin-top: -17px;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    One option is to put the .userInformation div inside the .textMessage div. That way, the contents of .textMessage will flow around the floated div.

    Another option is to remove float: left from .textMessage and instead give it a left margin slightly more than the width of the floated div. In this case, you remove the width setting on .textMessage.

    In a fluid design, those are probably your best options.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    One option is to put the .userInformation div inside the .textMessage div. That way, the contents of .textMessage will flow around the floated div.

    Another option is to remove float: left from .textMessage and instead give it a left margin slightly more than the width of the floated div. In this case, you remove the width setting on .textMessage.

    In a fluid design, those are probably your best options.
    Thanks Ralph,

    Are you able to provide a jsfiddle as I am still a bit confused

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Not used to jsfiddle, so here's a basic example of what I mean:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    
    <style media="all">
    .scheduledCenter{
    	width:100%;
    	min-height:100%;
    	padding:10px 0px 0 0px;
    }
    .scheduledCenter .alertMessage{
    	width:100%;
    	height:15px;
    	color:#3385B2;
    	background: #D1DEE8 url('../images/close.png') no-repeat 99% 8px;
    	border:3px solid #8099B4;
    	border-radius:3px;
    	padding:5px;
    }
    .scheduledCenter .alertMessage .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation{
    	float:left;
    	background: #f7f7f7;
    	width:110px;
    	height:100%;
    	min-height:100%;
    	margin:0 30px 0 0;
    }
    .scheduledCenter .userInformation .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation .userDetails{
    	padding:10px 0 0 0;
    }
    .scheduledCenter .userInformation .userImage img{
    	margin:0 0 10px 0;
    }
    .textMessage {
    	float:left;
    	width:100%;
    	position: relative;
    	background: #FFF;
    	border: 5px solid #000;
    }
    .textMessage:after, textMessage:before {
    	right: 100%;
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    }
    
    .textMessage:after {
    	border-right-color: #FFF;
    	border-width: 10px;
    	top: 50%;
    	margin-top: -10px;
    }
    .textMessage:before {
    	border-right-color: #000;
    	border-width: 17px;
    	top: 50%;
    	margin-top: -17px;
    }
    </style>
    	
    </head>
    <body>
    
    <div class="scheduledTop">
      <h3>Scheduled Messages</h3>
      <p class="alert">Alert Message Area</p>
    </div>
    <div class="scheduledCenter">
    	<p class ="alertMessage"><span class="bold">Important:</span> Your Account is set to Pacific/Auckland Time.  The Time is now <span class="bold">9:30AM</span> on <span class="bold">29th May 2012</span></p> <span class="close"></span>
    	
    	<div class="textMessage">
    		<div class="userInformation">
    		  <span class="userImage"><img src="_assets/images/ava.png" width="46" height="45" alt="Ava"></span>
    		  <span class="bold">FROM:</span>
    		  <p class="userDetails">123456789XXX</p>
    	        </div>
    		content bro
    	</div>
    </div>
    
    </body>
    
    </html>
    or this

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    
    <style media="all">
    .scheduledCenter{
    	width:100%;
    	min-height:100%;
    	padding:10px 0px 0 0px;
    }
    .scheduledCenter .alertMessage{
    	width:100%;
    	height:15px;
    	color:#3385B2;
    	background: #D1DEE8 url('../images/close.png') no-repeat 99% 8px;
    	border:3px solid #8099B4;
    	border-radius:3px;
    	padding:5px;
    }
    .scheduledCenter .alertMessage .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation{
    	float:left;
    	background: #f7f7f7;
    	width:110px;
    	height:100%;
    	min-height:100%;
    	margin:0 30px 0 0;
    }
    .scheduledCenter .userInformation .bold{
    	font-weight:bold;
    }
    .scheduledCenter .userInformation .userDetails{
    	padding:10px 0 0 0;
    }
    .scheduledCenter .userInformation .userImage img{
    	margin:0 0 10px 0;
    }
    .textMessage {
    	/*float:left;
    	width:100%;*/
    	margin-left: 120px;
    	position: relative;
    	background: #FFF;
    	border: 5px solid #000;
    }
    .textMessage:after, textMessage:before {
    	right: 100%;
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    }
    
    .textMessage:after {
    	border-right-color: #FFF;
    	border-width: 10px;
    	top: 50%;
    	margin-top: -10px;
    }
    .textMessage:before {
    	border-right-color: #000;
    	border-width: 17px;
    	top: 50%;
    	margin-top: -17px;
    }
    </style>
    	
    </head>
    <body>
    
    <div class="scheduledTop">
      <h3>Scheduled Messages</h3>
      <p class="alert">Alert Message Area</p>
    </div>
    <div class="scheduledCenter">
    	<p class ="alertMessage"><span class="bold">Important:</span> Your Account is set to Pacific/Auckland Time.  The Time is now <span class="bold">9:30AM</span> on <span class="bold">29th May 2012</span></p> <span class="close"></span>
    	
        <div class="userInformation">
    	  <span class="userImage"><img src="_assets/images/ava.png" width="46" height="45" alt="Ava"></span>
    	  <span class="bold">FROM:</span>
    	  <p class="userDetails">123456789XXX</p>
        </div>
    	<div class="textMessage">
    		content bro
    	</div>
    </div>
    
    </body>
    
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    Auckland NZ
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    I have tried your 2nd option and I got the following http://d.pr/i/e5F3 This is the main reason I tried to use what I had = confused

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm not sure what you're showing me there. If you open that code I posted in a .html file, you'll see what I was doing in your browser. I need to see what code you are using and what you don't like about it to help with this.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    You've got a number of flaws in there -- like the box model. You're declaring a lot of widths on elements that to be frank, shouldn't even HAVE widths.... Take your alertMessage class -- the default behavior of a display:block element is to auto-size to fit the full available width -- setting 100% width + 5px padding + 3px border makes it whatever your 100% width is PLUS 16 px -- larger than the box it's inside of! (unless you're in quirks mode on IE by omitting your doctype or having code before the doctype -- which would be "welcome to 1997")

    It also feels a bit DIV heavy -- I'm on the tablet right now so I can't really dig into it too deep, but I'll try to remember to take a closer look when I'm back at my workstation.

    On the whole though, you went overboard declaring widths on things that shouldn't have widths -- set width once on the outside, set it for the float, let everything else use flow and auto-fit to go where it wants. Some of those widths are so small -- do I dare ask what absurdly undersized font size you're declaring in px?

    Though I suspect you are also getting confused by the natural behavior of block level containers and floats -- where the container goes behind the float even if it's display:inline and textnode content wraps around it... something else setting an overflow state can fix.


Tags for this Thread

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
  •