Div width not obeying css style

Question

Gerbiler 1 Junior Poster in Training

13 Years Ago

Ok, so this problem may have been asked before, but no one seems to have my exact problem. When I put a set of inline <P>'s inside an inline div and then put the width to 100%, instead of expanding to the width of it's parent element it sticks at just the width it needs to fit it's <P> elements. Here is the code

<html>
<head>
<title>Header Template</title>
<style type="text/css">
	div.header{
		border-style:solid;
		border-width:2px 0px 2px 0px;
		border-color:#999999;
		padding-top:3px;
		padding-bottom:1px;
		display:inline;
		width:100%;
	}
	p.header{
		font-family:"Times New Roman", Times, serif;
		font-size:20;
		letter-spacing:4;
		display:inline;
		width:100%;
	}
	.black{
		color:black;
	}
	.grey{
		color:#999999;
	}
	p.big{
		font-size:26;
		padding:0px 0px 0px 0px;
		letter-spacing:0;
	}
	p.telephone{
		font-size:15;
	}
	div.telephone{
		right:0;
	}
</style>
</head>
<body>
<div class="header">
	<p class="header black big">T</p>
	<p class="header black">HE </p>
	<p class="header black big">N</p>
	<p class="header black">AME </p>
	<p class="header grey">| BOB JONES</p>
	<div class="header telephone">
		<p class="header telephone gray">| </p>
		<p class="header telephone">1855-ANUMBER</p>
	</div>
</div>
</body>
</html>

I'm pretty sure that this is super obvious, but I don't understand CSS and HTML that well.
P.S. I've already tried taking out the div inside that floats right, and that doesn't solve it

html-css web-design

3 Contributors
9 Replies
4K Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

leakbali 0 Light Poster

13 Years Ago

Please try this,

<html>
<head>
<title>Header Template</title>
<style type="text/css">
	div.header{
		border-style:solid;
		border-width:2px 0px 2px 0px;
		border-color:#999999;
		padding-top:3px;
		padding-bottom:1px;
		display:block;
		width:100%;
	}
	p.header{
		font-family:"Times New Roman", Times, serif;
		font-size:20;
		letter-spacing:4;
		display:inline;
		width:100%;
	}
	div.header2{
		display : inline;
		width : 100%;
	}
	p.header2{
		font-family:"Times New Roman", Times, serif;
		font-size:20;
		letter-spacing:4;
		display:inline;
		width:100%;
	}
	.black{
		color:black;
	}
	.grey{
		color:#999999;
	}
	p.big{
		font-size:26;
		padding:0px 0px 0px 0px;
		letter-spacing:0;
	}
	p.telephone{
		font-size:15;
	}
	div.telephone{
		right:0;
	}
</style>
</head>
<body>
<div class="header">
	<p class="header black big">T</p>
	<p class="header black">HE </p>
	<p class="header black big">N</p>
	<p class="header black">AME </p>
	<p class="header grey">| BOB JONES</p>
	<div class="header2 telephone">
		<p class="header2 telephone gray">| </p>
		<p class="header2 telephone">1855-ANUMBER</p>
	</div>
</div>
</body>
</html>

I add class div.header2 and p.header2
In html, you cannot use class header for div and p element inside class header for div element. So you must create another class header, like header2 for div and p element.

On class header in div element, give block value for attribute display. Because if you give inline value, the element will be treated like an inline element such as span, anchor etc., the width attribute will not expand like in block element.

Arkinder 93 Posting Pro in Training

13 Years Ago

First you need a doctype. No browser will work correctly without one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

It's not taking up the full width because you're using display: inline; Inline only allows the element to use the width and height that it is actually taking up, while block allows the element to use all of its width and height in addition to whatever margin or padding it may have.

Also, validate your CSS. You need to have a unit with the value of font-size and letter-spacing .

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

That's one browser. Good luck getting Firefox, Safari, Chrome, Opera, and IE7/IE8 to display consistently with malformed CSS. By the way, a doctype helps determine how CSS is used.

Here is a cleaned version of your markup with the number on the right. Please let me know if I did something that doesn't make sense to you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Header Template</title>
<style type="text/css">
	div#header {
		border-style: solid;
		border-width: 2px 0px 2px 0px;
		border-color: #999;
		padding-top: 3px;
		padding-bottom: 1px;
		width: 100%;
	}
	div#header p {
		font-family: "Times New Roman", Times, serif;
		font-size: 20px;
		letter-spacing: 4px;
		display: inline;
		width: 100%;
	}
	
	.black {
		color: #000;
	}
	.grey {
		color: #999;
	}
	div#header p.big {
		font-size: 26px;
		padding: 0;
		letter-spacing: 0px;
	}
	
	div#telephone {
		float: right;
	}
	div#telephone p {
		font-size: 15px;
	}
</style>
</head>
<body>
<div id="header">
	<p class="black big">T</p>
	<p class="black">HE </p>
	<p class="black big">N</p>
	<p class="black">AME </p>
	<p class="grey">| BOB JONES</p>
	<div id="telephone">
		<p class="grey">| </p>
		<p>1855-ANUMBER</p>
	</div>
</div>
</body>
</html>

Regards
Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Gerbiler 1 Junior Poster in Training · Answer 1 · 2011-07-25T22:16:33+00:00

Ok, I get what you've done, and thanks for doing it, but that wasn't my main problem. I failed to mention this in my post, but I need the telephone number to be right aligned against the page. :)

Gerbiler 1 Junior Poster in Training · Answer 2 · 2011-07-26T03:35:33+00:00

thanks, but even with malformed css the browser still understands most of it. I added the doctype, and units for the fonts, and then validated it and it said that no errors were found. it still didn't fix the problem though :(. Thanks to leakbali, I successfully managed to extend it the full width, however now the problem is that I can't get the telephone number to be all the way at the right.

leakbali 0 Light Poster · Answer 3 · 2011-07-26T15:23:31+00:00

To Gerbiler : it is right to use DOCTYPE, it make your code clean.

for the problem, you want, the telephone number force to right, please update the div element name header 2:

div.header2{
display : inline;
float : right;
margin : 5px 0;
}

The page will show like this http://www.leakbali.com/script/divwidth.htm, compare with the original code http://www.leakbali.com/script/divwidth-original.htm
See the article i post in http://www.leakbali.com/script/18/div-element-did-not-obeying-css-style/

Gerbiler 1 Junior Poster in Training · Answer 4 · 2011-07-26T18:52:51+00:00

Awesome, thank you so much. I'll mark the thread as solved. I obviously don't undestand css very well, do you recommend any particular tutorial/book/method of learning it?

leakbali 0 Light Poster · Answer 5 · 2011-07-26T20:01:37+00:00

You can try this http://www.leakbali.com/T-css/ and http://www.leakbali.com/T-css3/

Good Luck

Arkinder 93 Posting Pro in Training · Answer 6 · 2011-07-27T00:36:38+00:00

To Gerbiler : it is right to use DOCTYPE, it make your code clean.

HTML is not code, it is a markup. A doctype is used to tell the browser how to interpret the HTML and how it interacts with CSS. Without one the browser will go into quirks mode.

do you recommend any particular tutorial/book/method of learning it?

leakbali and I used the same techinique but in different ways. The markup you're using is a little messy in my opinion, but you'll see that both solutions yield the same result. I recommend learning from places that are a little more credible. htmldog, Mozilla, Google.

Regards
Arkinder