/    Sign up×
Community /Pin to ProfileBookmark

trying to learn to use the div tag with CSS

Copy linkTweet thisAlerts:
Feb 07.2008

Hi there,

I have been working the the div but I am still having some problems.

What I am trying to do is create a layout using the div but in the top div I am trying to put some smaller divs and align them to the bottom right, I have tried several approaches but I just am getting nothing.

I figured I would just give you the sample code.

[CODE]
<html>
<head>
<title>div test for website…</title>
<link rel=StyleSheet href=”./divTestStyle.css” type=”text/css”>
</head>

<body style=”margin: 0px; font-family: Arial; font-size: 11px;”>
<div style=”background-image:url(‘./images/back.jpg’); background-repeat: repeat-x; height: 130px; width:100%; margin-right:10px;”>
<div style=”margin-right: 10%; vertical-align: baseline; width: 520;”>
<div style=”vertical-align: baseline; background-color: #c6c6c6; width: 120; height: 35; margin-right: 0%”>
This is a link
</div>
</div>
</div>
<div style=”clear:both; margin-top: 0px; margin-left: 12px;”>
<div style=”float:left; border-right: 1px; border-right-style: solid; height: 450px; padding-right: 4px;”>
<p>link to something</p>
<p>Another link</p>
<p>click me!!!</p>
</div>
</div>
</body>
</html>

[/CODE]

Not sure what I am missing…

Thanks!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@matt_ritterFeb 07.2008 — what I generally will do in a header is use margins.

If I have a header box that is 90 pixels high and I want a 20 pixel navigation bar across the bottom I would have.

<i>
</i>&lt;style&gt;
.header{
height:90px;
width:520px;
}
.nav{
height:20px;
margin-top:70px;
float:right;
}
.nav a {
whatever styling you wish to apply to nav items
}
&lt;/style&gt;

&lt;div class="header"&gt;
&lt;div class="nav"&gt;
&lt;a href="#"&gt;nav items&lt;/a&gt; &lt;a href="#"&gt;nav item 2&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;



http://www.ibloomstudios.com/articles/vertical-align_misuse/ as to why vertical-align is squirrelly
Copy linkTweet thisAlerts:
@r0k3tauthorFeb 07.2008 — Hi there,

Thanks for your reply - It turns out I was confused about where the margin property worked... I thought it effected things inside the div. I see that it effects what is outside the div - "the margin from the borders of the encapsulating element." - would that be the correct way to say it.

I guess "duh" if you think about it - padding effects the inside and margin effects the outside...

thanks Ken!
×

Success!

Help @r0k3t spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...