displaying 2 boxes horizontally

Forum Moderators: not2easy

Message Too Old, No Replies

displaying 2 boxes horizontally

howmuch ever i try the second box goes down the first box

sandyweb

1:13 pm on Oct 13, 2006 (gmt 0)

there are two boxes (using css). i want to display like this

box 1 box 2

but the box 2 goes below the box 1. I dont know why. Here is the code

<div style="margin: 10px left; width: 40px; padding: 10px 0 10px 10px; text-align:left; background: #ffffff; border: #ccc 1px solid;">
content of box 1
</div>
<div style="margin: 10px left; width: 170px; padding: 10px 0 10px 10px; text-align:left; background: #ffffff; border: #ccc 1px solid;">
content of box 2
</div>

How to display box 1 & box 2 horizontally?

jessejump

1:44 pm on Oct 13, 2006 (gmt 0)

Add float: left to first box to get horizontal.

>>>>>margin: 10px left;
this is not valid CSS

sandyweb

2:20 pm on Oct 13, 2006 (gmt 0)

please save this code as a html file and make it to look in a horizontal line. here is the code.

<div style="margin: 10px; float: left; width: 40px; padding: 10px 0 10px 10px; text-align:left; background: #ffffff; border: #ccc 1px solid; ">
<a href="http://feeds.feedburner.com/abcdef" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a>
</div>
<div style="margin: 10px; width: 170px; padding: 10px 0 10px 50px; text-align:left; background: #ffffff; border: #ccc 1px solid; ">
<form action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Enter your Email<br /><input type="text" style="width:150px" name="email"/><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=123456789" name="url"/><input type="hidden" value="abcdefgh" name="title"/><br /><input type="submit" value="Subscribe me!" /><br />Delivered by <a href="http://www.feedburner.com/">FeedBurner</a></form>
</div>

I want the feed icon and the form to display in a single horizontal line (possibly working in both IE and Firefox). Note I have removed personally identifying information from the code.Thanks in advance!

jessejump

12:02 am on Oct 15, 2006 (gmt 0)

float: left both boxes.

sandyweb

4:57 am on Oct 15, 2006 (gmt 0)

there are two things that needs attention

1. the gap between feedicon and the email form should be less.

2. both in ie and firefox it should look same.

any idea to get it. pls use the above code to modify and give the modified code. thank u so much!

jessejump

11:03 pm on Oct 15, 2006 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

</div>

<form action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Enter your Email<br /><input type="text" style="width:150px" name="email"/><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=123456789" name="url"/><input type="hidden" value="abcdefgh" name="title"/><br /><input type="submit" value="Subscribe me!" /><br />Delivered by <a href="http://www.feedburner.com/">FeedBurner</a></form>

</div>
</body>
</html>

beaudeal

8:28 pm on Oct 21, 2006 (gmt 0)

to get the width the same in IE and FF you need to use the and IE hack -- it happens when you use floats -- just add "display: inline" and it should fix the double width that appears in IE.