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)

10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



float: left both boxes.

sandyweb

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

10+ Year Member



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)

10+ Year Member



<!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>

<body>
<div style="margin: 10px 0 10px 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 10px 10px 0; width: 170px; padding: 10px 0 10px 50px; text-align:left; background: #ffffff; border: #ccc 1px solid; float: left">

<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)

10+ Year Member



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.