/    Sign up×
Community /Pin to ProfileBookmark

CSS Div Tags

Copy linkTweet thisAlerts:
Jan 09.2008

I read some past threads but could not come up with the answer to my problem.

I am trying to use more CSS than tables so I used a DIV tag and used a SPAN tag to float something to the right. Problem is I can’t get them to line up in one line.

This is the page [url]http://www.tothepointdesigns.com/client/chichinga/web/menu.html[/url]

between Menu and the view shopping cart.

If you look in the source code I put 2 huge gap of space around the DIVs I am inquiring about.

Here is the CSS code:

[CODE]DIV.body
{
BORDER-RIGHT:;
PADDING-RIGHT: 2px;
BORDER-TOP:;
PADDING-LEFT: 20px;
FONT-WEIGHT:;
FONT-SIZE: 25px;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
BORDER-LEFT:;
COLOR: #FFFFFF;
PADDING-TOP: 2px;
BORDER-BOTTOM:;
FONT-FAMILY: “impact”;
HEIGHT: 80px;
BACKGROUND-COLOR:;
TEXT-DECORATION: none
}

SPAN.float
{
FLOAT: right;
POSITION: static;
}[/CODE]

Thanks in advance.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJan 09.2008 — First up, you cannot have a form within a span - block elements cannot be nested inside inline elements. There is no need for any sort of container around the form anyway - just float the form. If you want floated content in line with non-floated content, put the float first in the html. The text "Our Menu" is sort of just hanging there, with no html element describing what it is - it looks like a heading, so should be marked up as one.
[CODE] <div class="body">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" class="float">
<input name="cmd" value="_cart" type="hidden">
<input name="business" value="[email protected]" type="hidden">
<input name="submit" src="images/viewcart.gif" alt="View items in your shopping cart" border="0" type="image">
<input name="display" value="1" type="hidden">
</form>
<h2>Our Menu</h2>
</div>[/CODE]
[CODE]DIV.body {
BORDER-RIGHT:;
PADDING-RIGHT: 2px;
BORDER-TOP:;
PADDING-LEFT: 20px;
FONT-WEIGHT:;
PADDING-BOTTOM: 2px;
MARGIN: 16px 2%;
BORDER-LEFT:;
COLOR: #FFFFFF;
PADDING-TOP: 2px;
BORDER-BOTTOM:;
HEIGHT: 80px;
BACKGROUND-COLOR:;
TEXT-DECORATION: none
}
.body h2 {
font-size: 25px;
font-family: impact, arial, sans-serif;
}

form.float {
float: right;
}[/CODE]
Copy linkTweet thisAlerts:
@swwaltersauthorJan 09.2008 — Thank you very much for that schooling. I will look at my code and try your advice and see if I can learn a little bit more of how to CSS properly.

Have a great day.
×

Success!

Help @swwalters 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.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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