bgcolor disappears while positioning

[Ahmed Sadman]

Hello, I am completely new in Web-Design. I have read some of the site point book in order to learn.

Now I am here to annoy you, I am going to ask a lot of question about my problems while creating web pages with my own ideas. Let me ask the very simple question first:

When I am trying to positiong any div or any HTML5 element with "position: absolute", the background color disapperas immediately. If I use the float, the same thing happens.

I don't understand, the parent element has been given a white background, then if I position any of the child elements with "position" attribute, then why the white background disappears. My code is something like this (but not the actual code, I will send the actual page if necessary)

div#container {
  width: 80%;
  margin: 0 auto;
  height: 900px; /* Remember this code, I am going to talk about it later */
}
div#container div#content, header {
  position: absolute;
}
div#content {
  top: 100px;
  left: 100px;
}
header {
  top: 100px;
  right: 10px;
}

Now look at the commented css style, if I add the height in the parent element (in this case the "container"), everything goes ok within 900px. But if I remove the height, all the white background is gone (My "body" background was set to green, div#container background was set to white), what can I do? I can't always set height as the text flows down. And of course it's not the right way.

I have others questions, but answer this first. As I am new, details is appreciated.

[MarPlo]

Hi,
Try add background to the element with position:absolute;.
Also, set position:relative; to parent element.

[ralph.m]

Hi Ahmed Sadman. Welcome to the forums.

Firstly, don't use position: absolute for page layout (except for small items that are not part of the main page flow. The reason is that absolute elements are taken out of the "flow" of the page, meaning that other elements don't "see" them and thus do not respond to them (such as when they grow in size). That's why the container is closed when the inner element is absolute, because the container think it has nothing inside it, so it closes up to nothing—unless, of course, you give it a fixed height (which is almost always a bad idea anyway).

You should indeed be using float on the inner element. But as with absolutely positioned elements, a container doesn't wrap around a floated element by default. You have to tell the container to wrap around the floated item. The easiest way to do that is with overflow: hidden. So try this:

div#container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
div#container div#content, header {
  float: left;
}
div#content {
  width: XXXpx;
  padding: 0 0 0 0;
}
header {
  width: XXXpx;
  padding: 0 0 0 0;
}

Make sure to set a width on each floated element, or it won't float, and you can also set padding/margin to suit. Be aware, though, that left and right padding/margin are added to the overall width.

Hope that helps.

[Ahmed Sadman]

Hi Ahmed Sadman. Welcome to the forums.

Firstly, don't use position: absolute for page layout (except for small items that are not part of the main page flow. The reason is that absolute elements are taken out of the "flow" of the page, meaning that other elements don't "see" them and thus do not respond to them (such as when they grow in size). That's why the container is closed when the inner element is absolute, because the container think it has nothing inside it, so it closes up to nothing—unless, of course, you give it a fixed height (which is almost always a bad idea anyway).

You should indeed be using float on the inner element. But as with absolutely positioned elements, a container doesn't wrap around a floated element by default. You have to tell the container to wrap around the floated item. The easiest way to do that is with overflow: hidden. So try this:

div#container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
div#container div#content, header {
  float: left;
}
div#content {
  width: XXXpx;
  padding: 0 0 0 0;
}
header {
  width: XXXpx;
  padding: 0 0 0 0;
}

Make sure to set a width on each floated element, or it won't float, and you can also set padding/margin to suit. Be aware, though, that left and right padding/margin are added to the overall width.

Hope that helps.

Should I be using float element in the div#container too? What if I don't use float in the parent element. Again, if my overflow of content is hidden, what about if I need to add more text in the pages?

[ralph.m]

Should I be using float element in the div#container too? What if I don't use float in the parent element. Again, if my overflow of content is hidden, what about if I need to add more text in the pages?

We actually need to see the HTML this CSS applies to to be sure of what you are asking. The key is to give the parent element overflow: hidden, and then float the inner elements that need to sit side by side. That will allow the text areas to expand as much as needed.

[Ahmed Sadman]

I have to thank you ralph.m, I used overflow: hidden and it works nicely. But a new problem has appeared. The page I created is showing different resolutions. In 1024x768, the layout gets broken in contact.html page, though I used percentage (tried to be liquid). I am attaching the file so that you can further go on.

Test Page.zip

[ralph.m]

though I used percentage (tried to be liquid).

The thing is, you have to remember that left/right margin/padding get added to the overall width, so your total widths add up to more than 100%:

aside: 38 + 1 + 1 + 5 = 45
rightside: 69 + 0.5 = 69.5

45 + 69.5 = 113.5%

The only reason it doesn't break at all browser widths is that the aside has max-width instead of width. You need to adjust the widths to account for the left/right margin/padding.

[Ahmed Sadman]

The thing is, you have to remember that left/right margin/padding get added to the overall width, so your total widths add up to more than 100%:

aside: 38 + 1 + 1 + 5 = 45
rightside: 69 + 0.5 = 69.5

45 + 69.5 = 113.5%

The only reason it doesn't break at all browser widths is that the aside has max-width instead of width. You need to adjust the widths to account for the left/right margin/padding.

Oh, How fool I was. Thank you. Question 3 (don't get annoyed, I think this is my last question): How can I change the placeholder (form) color with CSS. I have found the following articles:
http://stackoverflow.com/questions/2...color-with-css
http://www.jacklmoore.com/notes/form-placeholder-text

Which one will be the best use?

[Paul O'B]

http://stackoverflow.com/questions/2...color-with-css
http://www.jacklmoore.com/notes/form-placeholder-text

Which one will be the best use?

They both explain how to style the placeholder text with the last example providing a JavaScript fall-back for older browsers so the last example would seem to be appropriate.

Try it and see That's how you learn the most

[Ahmed Sadman]

Yes, yes, you are right. But the real truth is, I didn't post here anything till I tried my best and failed You know I am new and having lot of problems, I have solved most of them myself and with help of Google. One thing, I am seeing this kind of css in many places-

* {
  margin: 0;
  padding: 0;
}

Wha's the use of "*", what does it do? I can't find about it anywhere.......so sorry

[Paul O'B]

One thing, I am seeing this kind of css in many places-

* {
  margin: 0;
  padding: 0;
}

Wha's the use of "*", what does it do? I can't find about it anywhere.......so sorry

The "*" is the universal selector and matches any element type. therefore when you say:

* {
  margin: 0;
  padding: 0;
}

You are saying that for every element that exists I want to remove the margin and padding. It is often used for demos as a quick fix to negate all margin and padding but has implications for form elements as it removes styling that can't easily be restored. These days a proper reset is used instead of that approach.

However some resets are just too big and others attempt to normalise the procedure.

Read an old post from Gary turner that addresses why resets are overkill in most instances.

Suffice to say that all you really need to know is that elements (apart from divs and spans and various others) have default margins or padding applied and that you need to address this directly and set the margin and padding that you want and not what the browser thinks you want.

[ralph.m]

How can I change the placeholder (form) color with CSS

The first article shows you that you can just put something like this into your CSS file:

input::-webkit-input-placeholder {
    color:    red;
}
input:-moz-placeholder {
    color:    red;
}

:-ms-input-placeholder { color: red; }

Wha's the use of "*", what does it do? I can't find about it anywhere.......so sorry

It is called the "universal selector". It stands for "all elements". So this

* {
  margin: 0;
  padding: 0;
}

means: "the margin and padding of all elements should be zero".

Edit:

Oops, should have refreshed first.

[Ahmed Sadman]

Thanks, I understand both of you.
But actually, the "Sticky Footer" tutorial taught me to use that universal selector. And Paul O'b is right, some of the elements looks odd and can't be redefined easily (at least for me).....

[Paul O'B]

Thanks, I understand both of you.
But actually, the "Sticky Footer" tutorial taught me to use that universal selector.

It is used in the demos to avoid having a reset in there as well and to keep the code simple but it is marked up as "demo only" and in a real situation you should use your own reset or at least control the margins and padding of the elements you use.

[Ahmed Sadman]

Oh, no. Same problem again with the bgcolor.

problem box.zip

My problem is, I want to expand the right contents/aside as the aside/rightcontents expands. The aside content is working nicely, but the main contents bgcolor is not exapanding, it's stuck in a the height where my "p" tag ended.

I added overflow:hidden as ralph.m said before, but in this case, text disappears and scroll bar gets added. I have added comments in the source codes so that you can understand easily.

I didn't explain here directly because you will get more clear seeing the pages directly in action. So the attachment would do good.

[ralph.m]

Only the outermost div can be 100% high. Perhaps what you need instead is faux columns?

[Paul O'B]

Why do you expect that an elements height should match some other unrelated element? In most cases (apart from table-cells and display table-cell) an elements height is dictated by its content. It will not match the height of some other unrelated element and if you think about it - how could it know?

As Ralph suggested you are looking for a faux column approach where you have to set things up specifically to cater for what you need. Just search the forums for faux columns and you should also find lots of examples. For ie8+ you could use display:table- and display:table-cell properties to mimic the equalising column nature of tables.

On another issue note that very few words are this long:

klajsf;askldfjas;fljkas;lfkjlskafjlasjkflaskjdflkasjfaklsdjflsakfjlaksfjlsakdjflkasfjlasdkfjlaskdfjlasdjkfla

Using unbroken text like that is just like putting an image in the page and it won't wrap unless you tell it. You can make unbroken text wrap at the containers edge by applying word-wrap:break-word to the parent container but in truth you only need it when text is in small columns or you are accepting input you can't control.

[Ahmed Sadman]

Why do you expect that an elements height should match some other unrelated element? In most cases (apart from table-cells and display table-cell) an elements height is dictated by its content. It will not match the height of some other unrelated element and if you think about it - how could it know?

As Ralph suggested you are looking for a faux column approach where you have to set things up specifically to cater for what you need. Just search the forums for faux columns and you should also find lots of examples. For ie8+ you could use display:table- and display:table-cell properties to mimic the equalising column nature of tables.

On another issue note that very few words are this long:

klajsf;askldfjas;fljkas;lfkjlskafjlasjkflaskjdflkasjfaklsdjflsakfjlaksfjlsakdjflkasfjlasdkfjlaskdfjlasdjkfla

Using unbroken text like that is just like putting an image in the page and it won't wrap unless you tell it. You can make unbroken text wrap at the containers edge by applying word-wrap:break-word to the parent container but in truth you only need it when text is in small columns or you are accepting input you can't control.

So, can you explain me more clearly? What can I do? Continue normal text flow as it should be except those meaningless words? I used word-wrap:break-word but nothing happened (anyway, you didn't give it as a solution, did you?)

Again, both the article and the content was in the "wrapper" div, so I thought that both of them should be realtive to each other. Sorry for my wrong knowledge. (I think web-design can't be done by me, because I can do nothing

[Paul O'B]

So, can you explain me more clearly? What can I do? Continue normal text flow as it should be except those meaningless words? I used word-wrap:break-word but nothing happened (anyway, you didn't give it as a solution, did you?)

I may not have been clear but the issue I was referring to was that your unbroken text stretched out of the container wrapper and did not wrap at the containers edge. If you apply the code I gave you to the parent of that text then the text will break at the containers edge. However, as I mentioned it is unlikely that you will come across any words that are 100 letters long and so will not be an issue in that element

Again, both the article and the content was in the "wrapper" div, so I thought that both of them should be realtive to each other. [/B]

Yes but there could be any number of other elements in that wrapper and do you think they should all magically stretch to the height of the parent?

Static (non positioned) elements will always only be as high as the content that holds them or as high as the height you have set. A percentage height would be be based on a parent that has a fixed height and not on a parent that's height is dictated by its own content. In essence percentage height is rarely any use apart from using on html and body (see the CSS faq on 100% height). To make equal columns you need the faux column technique Ralph mentioned or to utilise the display:table properties I mentioned (IE8+)

Sorry for my wrong knowledge. [B](I think web-design can't be done by me, because I can do nothing

Don't get depressed its a common mistake and you just need a fuller understanding of how css works which will come with practice. We all made the same mistakes at the beginning so just follow the examples we have mentioned as they should answer your original questions.

There is a steep learning curve at first but it will make sense in the end.

[Ahmed Sadman]

I may not have been clear but the issue I was referring to was that your unbroken text stretched out of the container wrapper and did not wrap at the containers edge. If you apply the code I gave you to the parent of that text then the text will break at the containers edge. However, as I mentioned it is unlikely that you will come across any words that are 100 letters long and so will not be an issue in that element

Hmm, I have tested several times. But I don't know why this is happening, I didn't use the word-wrap: break-word in the text holder but it still wrapped nicely. Are you seeing that page in different browser/version? I am using FF 10!!!

The meaningless words I used was only for testing purpose. And you are right, no word is 100 letters long

[Ahmed Sadman]

Okay, here's another situation. Suppose, I only want the right side content (that holds the main text) to expand vertically to a reasonable height as the outtermost parent container, no matter what happens to the ASIDE element, is that possible?
In some cases, I used overflow: hidden and it worked to achieve the above thing (thanks to ralph.m). But when I am going to apply overflow: hidden in the right side content (id'ed as "mainlist"), texts disappear as well as bgcolor and a scroll bar gets added to the browser. Why is this happening?

In fact, the above question was the burning question for me earlier, but none of you gave me the answer.

[ralph.m]

Suppose, I only want the right side content (that holds the main text) to expand vertically to a reasonable height as the outtermost parent container, no matter what happens to the ASIDE element, is that possible?

That's what normally happens without you having to do anything special. I'm probably not grasping what you mean here.

[Paul O'B]

Hmm, I have tested several times. But I don't know why this is happening, I didn't use the word-wrap: break-word in the text holder but it still wrapped nicely. Are you seeing that page in different browser/version? I am using FF 10!!!

Yes it is happening in FF10 and all other browsers as soon as the container is smaller than that unbroken text. Just close the browser window smaller and you will see it happen

I used overflow: hidden and it worked to achieve the above thing (thanks to ralph.m). But when I am going to apply overflow: hidden in the right side content (id'ed as "mainlist"), texts disappear as well as bgcolor and a scroll bar gets added to the browser. Why is this happening?

You are misunderstanding what is happening here and overflow:hidden is not some magic cure to make equal columns. All it does is make a parent contain its child floats by creating a "new block formatting context" and then the parents background will extend around the floats. It does nothing for individual columns and applying it to an element will just mean that any overflow is hidden - it will not make that elements background grow in height.

Adding overflow:hidden to #mainlist serves no purpose other than to hide any overflow as #mainlist contains no child floats. The text then gets hidden in #mainlist because #mainlist sits under a float (header) and thus gets hidden due to the way text under a float is handled. There was no reason to float the header anyway.

With regard to your original question of equal columns then you still need to read the "faux column" links Ralph mentioned above but also look at an old demo of mine that explains equal columns in detail.

A child element will never stretch to the height of its parent unless you are using the display:table-cell properties. The overflow:hidden just makes the parent encompass the child floats and therefore the background of the parent is tall enough to contain its child floats. To make individual columns stretch to the height of the parent you need to use tricks like the faux column approach (repeating background images on the parent) or other clever negative margin techniques. Or if only IE8+ support is required you can use display:table and table-cell properites like this:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p { margin:0 0 1em; }
.wrap {
	display:table;
	border-spacing:4px;
}
.inner { display:table-row }
.cola, .colb, .colc {
	width:150px;
	padding:2em 0;
	display:table-cell;
	vertical-align:top;
	background: green;
	border:1px solid #000;
}
.colb { background: red; }
.colc { background: blue; }

</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap{float:left;clear:both}
.cola,
.colb,
.colc {
	float:left;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
		<div class="inner">
				<div class="cola">
						<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text :</p>
				</div>
				<div class="colb">
						<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: </p>
				</div>
				<div class="colc">
						<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : </p>
				</div>
		</div>
</div>
</body>
</html>

[Ahmed Sadman]

I have understood everything and no problems for now. Thanks for your continuous help.