473,232 Members | 1,515 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,232 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 4452
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

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

Similar topics

49
by: Ville Vainio | last post by:
I don't know if you have seen this before, but here goes: http://text.userlinux.com/white_paper.html There is a jab at Python, though, mentioning that Ruby is more "refined". -- Ville...
0
by: Bill | last post by:
I have only a cursory knowledge of Microsoft's Application Blocks, which seem like they might be pretty cool. I'm wondering if any of these (such as the Exception Handling Application Block) can be...
12
by: Olaf Baeyens | last post by:
I am porting some of my buffer class code for C++ to C#. This C++ class allocates a block of memory using m_pBuffer=new BYTE; But since the class is also used for pointers for funtions that uses...
3
by: Arjen | last post by:
Hello, Are the ASP.NET 2.0 "Building Block's" the same this as the Enterprise Library Application Blocks? Thanks! Arjen
5
by: engsolnorm | last post by:
I'm playing with a sudoku GUI...just to learn more about python. I've made 81 'cells'...actually small canvases Part of my scheme to write the cells (all 81 of them in the gui) to a file (using...
2
by: Griff | last post by:
Hi I'm a VB6 developer attempting to learn C# ....and I've stumbled at the first hurdle of how to use with blocks. I'm used to writing: Dim o as someObject with o.mainProperty
2
by: Arnost Sobota | last post by:
Hello, Suppose I want to play with DIVs as if they were type characters. I have a series of fixed-height (width is of no importance) blocks which must follow one another from left to right, with...
9
by: Robbie Hatley | last post by:
Greetings, group. I just found a weird problem in a program where a variable declared in a {block} after a "case" keyword was being treated as having value 0 even though its actual value should...
350
by: Lloyd Bonafide | last post by:
I followed a link to James Kanze's web site in another thread and was surprised to read this comment by a link to a GC: "I can't imagine writing C++ without it" How many of you c.l.c++'ers use...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.