Beginners his CSS positioning question? - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Beginners his CSS positioning question?

I have been trying to learn CSS positioning from web site tutorials.

MarcMiller

7:29 pm on Sep 21, 2005 (gmt 0)

10+ Year Member

Beginners his CSS positioning question?
I have been trying to learn CSS positioning from web site tutorials. So I tried the code listed below with its CSS and HTML. I put the border property in all my CSS div in order that I may see what's happening with the positioning. From the below code I expected to see three pictures of my three camera gifs with them spaced 20 px apart however I did not see that. [snip] Could somebody explain why?
Thanks Marc

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body{
padding: 0;
margin: 0;
}
#topWraper {
width: 800px;
vertical-align: top;
border: 2px solid #000000;
float: left
}

#topLift {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000

}
#topMid {
float: left;
margin-left: 200px;
margin-top: 10px;
border: 2px solid #000000;

}
#topRight {
float: left;
margin-left: 200px;
margin-top: 10px;
border: 2px solid #000000;
}
-->
</STYLE>
</head>

<body BGCOLOR="#CCE7FF" >
<div id="topWraper" >
<div id="topLift"><img src="images/cam_bgBlue.gif" width="200" height="118" /></div>
<div di="topMid" ><img src="images/Camera-2.gif" width="200" height="119" /></div>
<div id="topRight"><img src="images/Camera.gif" width="200" height="119" /></div>
</div>
</body>

</html>
-->

[edited by: createErrorMsg at 8:40 pm (utc) on Sep. 21, 2005]
[edit reason] No urls, please. See forum charter. [/edit]

createErrorMsg

8:50 pm on Sep 21, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi, Marc. Welcome to WebmasterWorld!

Looks like there are two things in your code that stand between you and the layout you want.

First is this...

<div di="topMid" >

That typo is preventing the styles from being applied to the #topMid div.

Second, you've applied a 200px left margin to the #topMid and #topRight divs, which ismaking them too wide to fit within the container in a single row. Change those 200px margins to 20px and it should work the way you want.

cEM

MarcMiller

9:57 pm on Sep 21, 2005 (gmt 0)

10+ Year Member

I have corrected that additional zero in my left margin mistake and have changed in name of my divide ID from topMid to Mid for grins but it still does not work. [snip]. And still does not work as expected by me, explained above. Can what I've been doing wrong with the middle div be. explain please? I am also confused about not seeing borders around the middle div can someone explain that as well?
Thanks Marc

<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body{
padding: 0;
margin: 0;
}
#topWraper {
width: 800px;
vertical-align: top;
border: 2px solid #000000;
float: left
}

#topLift {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000

}
#Mid {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000;

}
#topRight {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000;
}
-->
</STYLE>
</head>

<body BGCOLOR="#CCE7FF" >
<div id="topWraper" >
<div id="topLift"><img src="images/cam_bgBlue.gif" width="200" height="118" /></div>
<div div="Mid" ><img src="images/Camera-2.gif" width="200" height="119" /></div>
<div id="topRight"><img src="images/Camera.gif" width="200" height="119" /></div>
</div>
</body>

</html>

[edited by: createErrorMsg at 10:57 pm (utc) on Sep. 21, 2005]
[edit reason] no urls, please. See forum charter. [/edit]

Robin_reala

10:51 pm on Sep 21, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

It should be:

<div id="mid">

not

<div div="mid">

texasville

11:03 pm on Sep 21, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body{
padding: 0;
margin: 0;
}
#topWrapper {
width: 800px;
vertical-align: top;
border: 2px solid #000000;
float: left
}

#topLeft {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000

}
#topMid {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000;

}
#topRight {
float: left;
margin-left: 20px;
margin-top: 10px;
border: 2px solid #000000;
}
-->
</STYLE>
</head>

<body BGCOLOR="#CCE7FF" >
<div id="topWrapper" >
<div id="topLeft"><img src="images/cam_bgBlue.gif" width="200" height="118" /></div>
<div id="topMid" ><img src="images/Camera-2.gif" width="200" height="119" /></div>
<div id="topRight"><img src="images/Camera.gif" width="200" height="119" /></div>
</div>
</body>

</html>

createErrorMsg

11:39 pm on Sep 21, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Note that you should also apply a 200px width to each of the divs. Floated elements need an explicit width, and since it's the div which is floated and not the image, the divs should be widthed, too.

cEM

MarcMiller

1:58 am on Sep 22, 2005 (gmt 0)

10+ Year Member

Thanks Robin_reala it works as expected now! I wonder just how I have a seeing block sometimes. cEM once I make a correction my div it worked in Internet Explorer, Firefox, Netscape 6, and Opera 7. So I am curious as to one the width attribute is necessary unassuming you're talking about the HTML and not the CSS rule.

createErrorMsg

2:53 am on Sep 22, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

cEM once I make a correction my div it worked in Internet Explorer, Firefox, Netscape 6, and Opera 7. So I am curious as to one the width attribute is necessary unassuming you're talking about the HTML and not the CSS rule.

With the div containing nothing but a 200px wide image, the divs without an explicit width are likely to work just fine. However, the specs specifically state that floated elements are to have an explicit width. Furthermore, doing so removes the potential for creating a scenario where the browser is uncertain how to calculate a width for the float, ending in inconsistent results.

You could almost certainly live without giving the divs a width, however, there's no harm in adding them in, and some potential benefit in doing so.

Rule of thumb: always give floated elements a width, in the CSS, using the width property (not using an attribute in the html tag).

cEM