How do I align two boxes?

  • (2 Pages)
  • +
  • 1
  • 2

20 Replies - 1027 Views - Last Post: 04 February 2013 - 11:28 PM

#1 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

How do I align two boxes?

Posted 28 January 2013 - 04:18 PM

Hi, I have a code for a site layout and I am restricted only to HTML. Can you tell me how to align a box on the same line using only HTML? I cannot use CSS. Here is the code of the first box-

<div style="width:270px; height: 150px; margin-top: 75px; margin-right: 450px; margin-left: 45px; text-align:left; font-size:11px; line-height:13pt; font-family:arial; color:black; float: left; overflow:auto; background-color:transparent; padding:5px; border:0px; letter-spacing:1px;">&nbsp;




<b>text box 2</b><P>
This box is for announcements. This box is for announcements. This box is for announcements. Announcement box. text text text text text text text text...announcement box, announcement box, scroll will begin soon. announcement box. announcement box. <P> 

<u>January 28, 2013</u> Got this sweet layout from BrokenWhispers! Thanks!


</div> 


I need it to line up with this code.

<div style="width:255px; height: 170px; margin-top: 1px; margin-right: 450px; margin-left: 450px; text-align:left; font-size:11px; line-height:13pt; font-family:arial; color:black; float: left; overflow:auto; background-color:transparent; padding:5px; border:0px; letter-spacing:1px;">&nbsp;




<b>text box 3</b><P>
This box is for My Breeding Group. <p>

Scroll
<p>
Scroll
<p>
Breeding group info</p>
My breeding group<p>
texttexttexttexttexttext TEXT TEXT <u>underlined text</u> <b>bolded text</b> <i>italic text</i> <strike>strike text</strike><p>
scrolling should begin soon<p>
scroll<p>
scroll<p>


</div>


I'm coding this for a www.howrse.com/ user webpage. Thanks for any information. I've searched for answers but all I see is 'use CSS'. I can't use CSS in this page, unfortunately.

Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: How do I align two boxes?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:26 PM

what you want is not possible. besides that, you are already using CSS.

CSS is the layout language for HTML. there is no way around that in a browser. and even the browser uses a lot of default CSS settings to display (unstyled) HTML.

it may be that you cannot modify CSS files but then why can you modify HTML and not CSS?
Was This Post Helpful? 1
  • +
  • -

#3 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:31 PM

That's what I meant, sorry. I realized my error after I posted that, haha. I need the code to align them properly, and if that means some type of CSS (I think some is permitted), can you explain that to me?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:35 PM

in what way are which elements supposed to be aligned?

PS. you should carefully consider where you open and where you close the <p> elements. currently the browser may render them differently to what you expect. (in other words, open <p> elements are closed before the next block element (including other <p>s))
Was This Post Helpful? 0
  • +
  • -

#5 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:37 PM

For example, they should be aligned as the first two boxes are aligned in the layout on this page:

http://www.freewebs....youttester.html

Which, for some reason, I cannot duplicate. I'm not sure how I got the layout to sit that way for that one but it did.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:41 PM

the problem is with the width of #3 and #4. both combined are larger than the available width of the container, hence #4 is put below #3 so it fits into the container.
Was This Post Helpful? 1
  • +
  • -

#7 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:45 PM

Let me see if I can show you the layout I'm trying to make. http://www.freewebs....youttester.html I saved the new layout on the page. Can you tell me what I did wrong?

I don't know how to edit so I'll just let you know -- the correct layout didn't save, so it's the old layout. Never mind. Hold on a moment please
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:49 PM

old layout’s widths:
#1: 240px
#2: 250px
#3: 255px
#4: 495px
container: 550px

I think that’s pretty clear why it looks the way it looks.

PS. you need a certain post count to edit.
Was This Post Helpful? 0
  • +
  • -

#9 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:50 PM

What should the right width be so that it doesn't break?
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:51 PM

let me put it mathematically: #3 + #4 ≤ 550

This post has been edited by Dormilich: 28 January 2013 - 04:52 PM

Was This Post Helpful? 0
  • +
  • -

#11 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:53 PM

So should I have #3 be about 200 and #4 about 300 or so?
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 04:54 PM

that is one possibility.
Was This Post Helpful? 0
  • +
  • -

#13 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 04:55 PM

Oh no. I think I broke the whole thing.

http://www.freewebs....youttester.html
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: How do I align two boxes?

Posted 28 January 2013 - 05:05 PM

that’s because the "background" of the single <div>s is really the background of the container and you have not placed the sub-<div>s correctly.

… not to speak of the text in the background image.

I hope you’re not exporting Photoshop to HTML …
Was This Post Helpful? 0
  • +
  • -

#15 coding4fun  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-January 13

Re: How do I align two boxes?

Posted 28 January 2013 - 05:06 PM

I've been using GIMP. The image is a background and then I want the textboxes to fall over the transparent white spaces.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2