• 0

CSS problems


Question

Hello,

I'm a CSS newbie. It's really awesome - there are so many things you can do with it! Anyway, I am teaching myself and to practice I am trying to create a tableless page. I have a div called "content". It is positioned 70px from the top and 170px from the left. I want the div to fill in to 10px within the right margin (whatever that may be for the user's window size). As you can see I have set the width to 100%. But 100% goes off the screen to the right. I don't want to make a fixed width. I just want it to fill in. Any ideas are much appreciated.

#content {
	left : 170px;
	top : 70px;
	position : absolute;
	color : #000000;
	background-color : #FFFFFF;
	border : 1px solid #666666;
	width : 100%;
}

By the way, what is the difference between div and span?

Thanks!

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Hey, I use css cuz it's so nice, but I'm lazy and just use regular tables (even though it's bad)

But anyways, I do remember reading something on tables without the table tag and I found it again. So here it what I got. Hopefully you can learn from it:

(just make a file with the following in it and preview it in your web browser; change stuff and see what happens)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

<title>Examples of margins, padding, and borders</title>

<style type="text/css">

UL {

background: blue;

margin: 12px 12px 12px 12px;

padding: 3px 3px 3px 3px;

/* No borders set */

}

LI {

color: black; /* text color is black */

background: gray; /* Content, padding will be gray */

margin: 12px 12px 12px 12px;

padding: 12px 0px 12px 12px; /* Note 0px padding right */

list-style: none /* no glyphs before a list item */

/* No borders set */

}

LI.withborder {

border-style: dashed;

border-width: medium; /* sets border width on all sides */

border-color: black;

}

</STYLE>

</head>

<body>

<ul>

<li>First element of list

<li class="withborder" align="right">Second element of list is longer

to illustrate wrapping.

</ul>

</body>

</html>

I don't know if you can do table with div tags...

DIV vs SPAN, shrug, I know that DIV tags are completely dynamic, but I'm not sure if span tags are...

Hope this Helps

Link to comment
Share on other sites

  • 0

If you use a DIV tag it will add a <br> automatically, a SPAN tag will not.. so you could have

&lt;span&gt;Hello,&lt;/span&gt;
&lt;span&gt;World&lt;/span&gt;

and it'll display Hello, World. If you would of used DIV tags it would be

Hello,

World

As with your out of page issue try this:

width : 100% - 170px;

Not too sure if it's allowed but it might work...

Link to comment
Share on other sites

  • 0

First of all, you shouldn't start messing around with the position property until you're fairly comfortable with the concept of rendering flow. Until then, you should leave out rendering properties like position, float, display, etc. If all you want to do is place your <div> at an offset, try using the margin property instead:

#content {
color : #000000;
background-color : #FFFFFF;
border : 1px solid #666666;
margin: 70px 10px auto 170px;
}

I used the shortcut for the margin property which can be defined in 3 ways:

margin: (top) (right) (bottom) (left)

margin: (top and bottom) (left and right)

margin: (all 4 sides)

This is explained in further detail here.

A <div> is commonly a block level element. A <span> is commonly an inline element.

I'm a relative n00b, myself (just started experimenting a week ago). But reading the links in my sig can quickly enlighten you to the possibilities of CSS (and the limitations of popular browsers).

Good luck

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.