Two "blocks" left and right aligned on the same line

[Michael7]

Hi Everyone,

I've been trying to get two blocks of text to be aligned, one left, one right, on the same line.

What I'm trying to mimic is what I did with tables here:
http://www.workmenforChrist.org (under the "Site Map" link)

I tried floating the blocks with the code:

/*Right box on the index page*/
.rightindexbox {
float:        right;
min-width:    300px;
max-width:    350px;
border:        1px solid;
}
 
/*Left box on the index page*/
.leftindexbox {
float:        left;
min-width:    300px;
max-width:    350px;
border:        1px solid;
}
 

It seemed to work, but not really. When the page is resized, only one of the blocks get resized to accommodate. The other stays the max-size, and therefore when the page shrinks too much they of course go to separate lines. This wouldn't happen if both resized with the page. And then, in Opera and Firefox (the only browsers I have to test in apart from IE) it had the "Latest News" block squeeze in between the two floating blocks. That's what the code is supposed to do, but not what I want it to do. So I assume doing all this with floats . . . will not work?

I tried to solve things by surrounding the two floating blocks with another div, and another <p> tag, and things like that in order to make it in a bigger block to at least keep the Latest News text out, but that of course didn't work either.

Is there a way to do this? I searched and found this (linked in an old thread here)
http://www.spartanicus.utvinternet.i..._using_css.htm

BUT . . . I don't think this would be good for in my case . . . especially since it said IE doesn't support it? With most of my users using IE to access my site, I still have to make sure everything looks and works in it as well as modern browsers.

So is there any way to do this? I think the easiest way would just be to make the floats BOTH resize, and somehow keeping the text from squeezing between them (I know, that's kinda the purpose of floats, to have text move around them, but it's not what I'm wanting to happen)

I really appreciate the help here, thanks!

~Michael

[drhowarddrfine]

min-width and max-width do not work in IE.

When you set anything to px, it's fixed and won't move. You want to change the widths to percent, which will follow the width of their parent as the browser changes size.

[Michael7]

min-width and max-width do not work in IE.

When you set anything to px, it's fixed and won't move. You want to change the widths to percent, which will follow the width of their parent as the browser changes size.

Thanks,

I am having trouble though figuring out how I can use percents with the width of those two blocks though. By the way, here is what I have so far:

http://www.workmenforChrist.org/testindex.html

The reason I wonder about how to do it with percents, is the main page is set to go from 600-800 pixels. No smaller than 600, no larger than 800. The two blocks, I want them to be like I mentioned, on the same line but one on the right, one on the left. Now when the page is at it's widest, 800, I want each block to only be 350 at most. When at the smallest, 600, then I want it no larger/smaller than 300 (that way the two blocks will meet in the middle, half of 600. (but now I see half would have to make the blocks 298, if it's inside two other blocks, right?)

How can I use percent for that though, because when the page is smallest, it would be 50%, but when it's at it's largest, the blocks would go down to 43.75% of the whole page. It's like I would have to put min-width at 50%, and max at 43.75%?

Then I still have the problem with how, because they are floating, the Latest News goes in between them.

Sheesh . . . am I just trying to perform the oddest of things with this website or are these common troubles?

Thanks for the continued help, I do appreciate all you've been doing to help me with this transition to CSS!

~Michael

[Michael7]

I'm beginning to think it's impossible to do what I'm seeking, with CSS. I still cannot seem to even begin to think about what may work. I'm searching, and testing, but nothing is working.

~Michael

[drhowarddrfine]

Now, now, Michael.

I'm out of town. I'll look at this tomorrow.

[Michael7]

Now, now, Michael.

I'm out of town. I'll look at this tomorrow.

Thanks, drhowarddrfine :)

I await your reply and continued help, thank you again!

[drhowarddrfine]

I started looking at this on Sunday but I've been really tired lately. I'm going out of town today, again, but I'll actually have more time. Hotel room with nothing to do in a small town...you know.

[drhowarddrfine]

Not a lot of changes. Couldn't test in IE but it should be OK. This can be done better.
[html]
<div class="main">

<img src="index_files/wfc2tim2_15.gif" class="banner">
<p class="biblequote">Study to shew thyself approved unto God, a workman that needeth
not to be ashamed, rightly dividing the word of truth.--2 Timothy 2:15</p>
<h1>Welcome to Workmen For Christ</h1>

<p> This is just a test page. I'm testing the code for changing placement. So
what's on this page, isn't a new page I'm trying out. I'm just putting random things on here.
As I learn, I'll try to mimic the <a href="http://www.workmenforchrist.org/index.html">
Home Page</a>. When that's done, the site-wide update will be close to halfway finished!
</p>


<div class="maintext">
<div id="indexbox">
<div class="leftindexbox">
This is another test . . . and it should (needs to) appear directly left of the Right Index Box
</div>

<div class="rightindexbox">
Test . . . this is only a test of the right index box . . . only a test!
</div>
</div>
<div class="news">
[/html]

.banner{
    display:block;
    margin:0 auto;
    }
#indexbox{
    overflow:auto
    }
.sidebar { float:left; width: 155px; }
.sidebar a:link, .sidebar a:visited { color: rgb(47, 79, 79); }
.sidebar img { display: block; margin-left: auto; margin-right: auto; }
.sidebar h3 { text-align: center; font-weight: normal; }
.sidebar ul { padding: 0px; margin-left: 16px; }
.biblequote { color: red; font-family: Arial; }
.main { min-width: 600px; }
.jesussaid { color: red; }
.verse { color: black; }
.news { margin-left: auto; margin-right: auto; width: 500px; }
.news h2 { margin: 0px; color: red; text-align: center; text-decoration: underline; }
.newshead { display: block; text-align: center; color: red; }
.news em { font-weight: bold; }
.rightindexbox { border: 1px solid ; float:right;width:49% }
.leftindexbox { border: 1px solid ; float:left;width:50%}
 

[klaydze]

Hi Everyone,

I've been trying to get two blocks of text to be aligned, one left, one right, on the same line.

What I'm trying to mimic is what I did with tables here:
http://www.workmenforChrist.org (under the "Site Map" link)

I tried floating the blocks with the code:

/*Right box on the index page*/
.rightindexbox {
float:        right;
min-width:    300px;
max-width:    350px;
border:        1px solid;
}
 
/*Left box on the index page*/
.leftindexbox {
float:        left;
min-width:    300px;
max-width:    350px;
border:        1px solid;
}
 

It seemed to work, but not really. When the page is resized, only one of the blocks get resized to accommodate. The other stays the max-size, and therefore when the page shrinks too much they of course go to separate lines. This wouldn't happen if both resized with the page. And then, in Opera and Firefox (the only browsers I have to test in apart from IE) it had the "Latest News" block squeeze in between the two floating blocks. That's what the code is supposed to do, but not what I want it to do. So I assume doing all this with floats . . . will not work?

I tried to solve things by surrounding the two floating blocks with another div, and another <p> tag, and things like that in order to make it in a bigger block to at least keep the Latest News text out, but that of course didn't work either.

Is there a way to do this? I searched and found this (linked in an old thread here)
http://www.spartanicus.utvinternet.i..._using_css.htm

BUT . . . I don't think this would be good for in my case . . . especially since it said IE doesn't support it? With most of my users using IE to access my site, I still have to make sure everything looks and works in it as well as modern browsers.

So is there any way to do this? I think the easiest way would just be to make the floats BOTH resize, and somehow keeping the text from squeezing between them (I know, that's kinda the purpose of floats, to have text move around them, but it's not what I'm wanting to happen)

I really appreciate the help here, thanks!

~Michael

try this one.
HTML CODE:
<div id=leftcolumn>
<p>The content of your left column</p>
</div>

<div id=rightcolumn>
<p>The content of your right column</p>
</div>

CSS CODE:

#leftcolumn, #rightcolumn
{
float: left;
width: 100px; *** this is the width of your left and right column
}

#leftcolumn
{
margin-right: 15px; ***this is the margin of the left column to your right column
}

i hope that code helps you. THX

[drhowarddrfine]

The only problem with that is the <div>'s are superfluous, that is, unnecessary.

[Michael7]

Sorry it took me a while to reply,

Thanks for the help! Drhowarddrfine, You know, I figured I would have to deal with the overflow thing, but wasn't knowledgeable with it, so I thank you much for it! I was wondering about how you put the sidebar as a float instead. Before, I was worried about doing that because I thought that it would cause problems with certain parts wrapping around it. But I can see now that if it's in it's own div (the main part) it won't do that.

Is it better to use float instead of absolute (seems like it, especially in the thought of text overlapping), also considering that I have to put two more "blocks" of text at the very bottom, like a footer? I had also heard something about IE messing up certain things floating?

But thank you so much for the help, I can understand how busy things can get, so I really appreciate it! And yes, it does work nicely in IE as well :)

Thanks also, Klaydze, for the help. I do see what drhowardddrfine means though, I think, because you can put the ID for the <p> instead of using the <div> tags, right?

But Thanks for the help, I appreciate that too. It may help me out in thinking of other things I may need to do on other pages and such :)

~Michael

[drhowarddrfine]

Is it better to use float instead of absolute

Not always. In fact, I find it much better to use absolutes intead of floats, but not always. In this case, it might have just been easier.

I had also heard something about IE messing up certain things floating?

And just about everything else.

you can put the ID for the <p> instead of using the <div> tags, right?

Correct. <p> can be positioned just like a div so the div was not necessary.

I had some time at night to better concentrate on your markup. I'm glad to see you understood what could be done but your markup could be structured much better. I almost tried to do that but just got too tired. (I still am.)

I highly, highly recommend you check your local library for the book "Transcending CSS". Buy it if necessary. You're eyes will be opened! (Written by some online acquaintances but not the reason you should buy it ;) )

[Michael7]

Not always. In fact, I find it much better to use absolutes intead of floats, but not always. In this case, it might have just been easier.
And just about everything else.
Correct. <p> can be positioned just like a div so the div was not necessary.

I had some time at night to better concentrate on your markup. I'm glad to see you understood what could be done but your markup could be structured much better. I almost tried to do that but just got too tired. (I still am.)

I highly, highly recommend you check your local library for the book "Transcending CSS". Buy it if necessary. You're eyes will be opened! (Written by some online acquaintances but not the reason you should buy it ;) )

Thanks again, I will definitely take a look at the book. I looked at some reviews, and will have to take a trip and try to find it at the library or if need be, get it. Sounds like it could help! Thanks for the help, and advice!