[coding4fun]

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!

[Dormilich]

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?

[coding4fun]

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?

[Dormilich]

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

[coding4fun]

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.

[Dormilich]

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.

[coding4fun]

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

[Dormilich]

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.

[coding4fun]

What should the right width be so that it doesn't break?

[Dormilich]

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

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

[coding4fun]

So should I have #3 be about 200 and #4 about 300 or so?

[Dormilich]

that is one possibility.

[coding4fun]

Oh no. I think I broke the whole thing.

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

[Dormilich]

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 …

[coding4fun]

I've been using GIMP. The image is a background and then I want the textboxes to fall over the transparent white spaces.