CSS creates each new <div> below the one that preceeded it. Is there any way to put it beside its preceeding <div>? It seems like something that would be fairly common, but I have not found it in any tutorials so far.
I've tried a few things with "float" but get in trouble with the following content - things go nuts. And its using a hammer to kill a fly. I don;t need all the flow control that goes with float. And, I don't want to throw it to the opposite end of the container. I just want it to sit there immediately to the right of and contiguous to the preceeding <div>.
With tables, of course, it's dead easy. But tables are evil.display:inline;And it suddenly occurs to me, reading your reply, that that needs to part of the definition of the container element, not the elements you are trying to align. I was trying to do it using that in the elements I was aligning. Duh.Not only do the two <divs> not appear side-by-side, they do not even appear within the containing element. They are vertically within the right area, but are one atop the other at the extreme left of the screen and the containing <div> "cinfo" appears as two small rectangles, centered, one above and one below the level of the two that are supposed to be side by side.
<head>
<style type="text/css">
#cinfo {
width: 470px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding-left: 75px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #000000;
display: inline;
border: 1px solid #ff0000;
}
#tleft {
width: 230px;
text-align: left;
}
#tright {
width: 140px;
text-align: right;
vertical-align: top;
}
</style>
</head>
<body>
<div id="cinfo">
<div id="tleft">
8265 Whatever St.<br/>Suite 8<br/>Foobash CA 90000
</div>
<div id="tright">
(619) 555-0000<br/>Fax 555-0000
</div>
</div>
</body>Your container should be position:relative.
The 'display:inline' suggestion was a very bad one.
The right float comes before the left div in the source..
You say you don't want the control over the flow that floats give you... What does that mean? I think you do want to control the flow - if you didn't, you wouldn't be here.
Look at the source. (<!-- m --><a class="postlink" href="http://bonrouge.com/test/jayhawk.htm">http://bonrouge.com/test/jayhawk.htm</a><!-- m -->)Thanks, BonRouge, actually that is almost precisely what I had tried before. Problem arose in that the text contained in the <div> defined after <cinfo> doesn't appear below that element is it normally would, but is tacked on to the right of the <tright> element and then wraps over below the <tleft> element.
So how do I get that to stop? I have read about "clear" half a dozen times and I am stumped as to what I am supposed to apply it to.You want the next element to be below the two that you have there or below the whole container? If it's the former, then you just need to add 'clear:right' to the next element. If it's the latter, you might need some kind of clearing effort... See this page... (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=floats">http://bonrouge.com/br.php?page=floats</a><!-- m -->).Below the whole container. I read your page, and I see the problem: the container all but doesn't exist in reality.
But I have a bigger issue. Your alignment certainly works in your sample, and your sample works on my computer, and that exact same code doesn't work on my page. The <tright> is to the right of <tleft> okay, but the top edge is below the bottom edge of <tleft> and the subsequent element (outside of the container) is to the left of <tright>.
For what it's worth, <cinfo> is inside of <content> which is inside <outer>:
#outer { /* defines and displays the "outer box" */
border: 1px solid #0000B0;
width: 760px;
height: 490px;
background: #FFFFFF;
margin: auto; /* centers it in viewers screen */
}
#content { /* the container for page content */
height: 365px;
width: 760px;
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}It would be helpful if you posted a link to your page as there could be more to it than the code you've posted (and of course, it's good if I can see the whole page for myself - get the big picture).This here (<!-- m --><a class="postlink" href="http://www.bassreports.com/test/contact.php">http://www.bassreports.com/test/contact.php</a><!-- m -->) is the page in question.
I appreciate your time and effort. I'm making progress with this CSS stuff, but I'm still very new at it.You need to put them the other way round in the source. The right float needs to be before the left div.Now that is truely mind boggling. Is that, perchance, mentioned in documentation anywhere? Awesome. That page will look very nice now after I tweak some margins.
Thanks.delchange <div> to <span>
Maybe, div will always create a new line.
I've tried a few things with "float" but get in trouble with the following content - things go nuts. And its using a hammer to kill a fly. I don;t need all the flow control that goes with float. And, I don't want to throw it to the opposite end of the container. I just want it to sit there immediately to the right of and contiguous to the preceeding <div>.
With tables, of course, it's dead easy. But tables are evil.display:inline;And it suddenly occurs to me, reading your reply, that that needs to part of the definition of the container element, not the elements you are trying to align. I was trying to do it using that in the elements I was aligning. Duh.Not only do the two <divs> not appear side-by-side, they do not even appear within the containing element. They are vertically within the right area, but are one atop the other at the extreme left of the screen and the containing <div> "cinfo" appears as two small rectangles, centered, one above and one below the level of the two that are supposed to be side by side.
<head>
<style type="text/css">
#cinfo {
width: 470px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding-left: 75px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #000000;
display: inline;
border: 1px solid #ff0000;
}
#tleft {
width: 230px;
text-align: left;
}
#tright {
width: 140px;
text-align: right;
vertical-align: top;
}
</style>
</head>
<body>
<div id="cinfo">
<div id="tleft">
8265 Whatever St.<br/>Suite 8<br/>Foobash CA 90000
</div>
<div id="tright">
(619) 555-0000<br/>Fax 555-0000
</div>
</div>
</body>Your container should be position:relative.
The 'display:inline' suggestion was a very bad one.
The right float comes before the left div in the source..
You say you don't want the control over the flow that floats give you... What does that mean? I think you do want to control the flow - if you didn't, you wouldn't be here.
Look at the source. (<!-- m --><a class="postlink" href="http://bonrouge.com/test/jayhawk.htm">http://bonrouge.com/test/jayhawk.htm</a><!-- m -->)Thanks, BonRouge, actually that is almost precisely what I had tried before. Problem arose in that the text contained in the <div> defined after <cinfo> doesn't appear below that element is it normally would, but is tacked on to the right of the <tright> element and then wraps over below the <tleft> element.
So how do I get that to stop? I have read about "clear" half a dozen times and I am stumped as to what I am supposed to apply it to.You want the next element to be below the two that you have there or below the whole container? If it's the former, then you just need to add 'clear:right' to the next element. If it's the latter, you might need some kind of clearing effort... See this page... (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=floats">http://bonrouge.com/br.php?page=floats</a><!-- m -->).Below the whole container. I read your page, and I see the problem: the container all but doesn't exist in reality.
But I have a bigger issue. Your alignment certainly works in your sample, and your sample works on my computer, and that exact same code doesn't work on my page. The <tright> is to the right of <tleft> okay, but the top edge is below the bottom edge of <tleft> and the subsequent element (outside of the container) is to the left of <tright>.
For what it's worth, <cinfo> is inside of <content> which is inside <outer>:
#outer { /* defines and displays the "outer box" */
border: 1px solid #0000B0;
width: 760px;
height: 490px;
background: #FFFFFF;
margin: auto; /* centers it in viewers screen */
}
#content { /* the container for page content */
height: 365px;
width: 760px;
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}It would be helpful if you posted a link to your page as there could be more to it than the code you've posted (and of course, it's good if I can see the whole page for myself - get the big picture).This here (<!-- m --><a class="postlink" href="http://www.bassreports.com/test/contact.php">http://www.bassreports.com/test/contact.php</a><!-- m -->) is the page in question.
I appreciate your time and effort. I'm making progress with this CSS stuff, but I'm still very new at it.You need to put them the other way round in the source. The right float needs to be before the left div.Now that is truely mind boggling. Is that, perchance, mentioned in documentation anywhere? Awesome. That page will look very nice now after I tweak some margins.
Thanks.delchange <div> to <span>
Maybe, div will always create a new line.