471,610 Members | 1,340 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

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

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:
Expand|Select|Wrap|Line Numbers
  1. /*Right box on the index page*/
  2. .rightindexbox {
  3. float:        right;
  4. min-width:    300px;
  5. max-width:    350px;
  6. border:        1px solid;
  7. }
  8.  
  9. /*Left box on the index page*/
  10. .leftindexbox {
  11. float:        left;
  12. min-width:    300px;
  13. max-width:    350px;
  14. border:        1px solid;
  15. }
  16.  
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
Sep 27 '07 #1
12 4227
drhowarddrfine
7,435 Expert 4TB
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.
Sep 27 '07 #2
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
Sep 27 '07 #3
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
Sep 29 '07 #4
drhowarddrfine
7,435 Expert 4TB
Now, now, Michael.

I'm out of town. I'll look at this tomorrow.
Sep 30 '07 #5
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!
Oct 2 '07 #6
drhowarddrfine
7,435 Expert 4TB
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.
Oct 2 '07 #7
drhowarddrfine
7,435 Expert 4TB
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]

Expand|Select|Wrap|Line Numbers
  1. .banner{
  2.     display:block;
  3.     margin:0 auto;
  4.     }
  5. #indexbox{
  6.     overflow:auto
  7.     }
  8. .sidebar { float:left; width: 155px; }
  9. .sidebar a:link, .sidebar a:visited { color: rgb(47, 79, 79); }
  10. .sidebar img { display: block; margin-left: auto; margin-right: auto; }
  11. .sidebar h3 { text-align: center; font-weight: normal; }
  12. .sidebar ul { padding: 0px; margin-left: 16px; }
  13. .biblequote { color: red; font-family: Arial; }
  14. .main { min-width: 600px; }
  15. .jesussaid { color: red; }
  16. .verse { color: black; }
  17. .news { margin-left: auto; margin-right: auto; width: 500px; }
  18. .news h2 { margin: 0px; color: red; text-align: center; text-decoration: underline; }
  19. .newshead { display: block; text-align: center; color: red; }
  20. .news em { font-weight: bold; }
  21. .rightindexbox { border: 1px solid ; float:right;width:49% }
  22. .leftindexbox { border: 1px solid ; float:left;width:50%}
  23.  
Oct 4 '07 #8
klaydze
30
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:
Expand|Select|Wrap|Line Numbers
  1. /*Right box on the index page*/
  2. .rightindexbox {
  3. float:        right;
  4. min-width:    300px;
  5. max-width:    350px;
  6. border:        1px solid;
  7. }
  8.  
  9. /*Left box on the index page*/
  10. .leftindexbox {
  11. float:        left;
  12. min-width:    300px;
  13. max-width:    350px;
  14. border:        1px solid;
  15. }
  16.  
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
Oct 5 '07 #9
drhowarddrfine
7,435 Expert 4TB
The only problem with that is the <div>'s are superfluous, that is, unnecessary.
Oct 5 '07 #10
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
Oct 6 '07 #11
drhowarddrfine
7,435 Expert 4TB
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 ;) )
Oct 6 '07 #12
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!
Oct 8 '07 #13

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by Olaf Baeyens | last post: by
3 posts views Thread by Arjen | last post: by
5 posts views Thread by engsolnorm | last post: by
2 posts views Thread by Griff | last post: by
2 posts views Thread by Arnost Sobota | last post: by
9 posts views Thread by Robbie Hatley | last post: by
350 posts views Thread by Lloyd Bonafide | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.