Percentage Widths and Floats

HTML & CSS
1

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:


<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:


.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

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

Thanks Ralph,

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

4

Not used to jsfiddle, so here’s a basic example of what I mean:


<!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">
		[COLOR="#FF0000"]<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>[/COLOR]
		content bro
	</div>
</div>

</body>

</html>

or this


<!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 {
	[COLOR="#FF0000"]/*float:left;
	width:100%;*/
	margin-left: 120px;[/COLOR]
	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

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

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

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.