OK so I am trying to do something I know how to do in a fixed width layout (or in a menu that is a specific width) but can’t seem to get working in a fluid width.
This all takes place in the 82px tall header. all of this should happen on the same line and never break to the next:

I want to float a logo left and then float another image all the way to the right BUT have a single line of text (in an <h1> tag) in the middle between them. The logo should always stay left and the other image should always be at right when the browser is resized. The text should always fall in the center when the browser is resized as well. I do not want to use a table. In fact, this all comes from a “redesign” of a site that is using tables to accomplish this very thing. And I could just do that again. But I have been asked to get it done table-less - Plus, I just want to.

The site that has this going on with the table is this: http://www.bmmg.us

SO in my CSS code I have the following:

Markup:

I would really like to get the CSS to behave exactly like the table version does (http://www.bmmg.us). The “<h1>www.bmmg.us</h1>” should “float” in the center of these two images AND if the browser resizes to a width smaller than the content allows for, the image and/or text should NOT drop to the next line. Scroll bars should appear instead.

This really does not seem like it should be that hard and it certainly does not seem that a table can do something better than a div can. That’s crazy talk, right!?

Anyway, please help out. Thanks y’all!

Dan

We have two declarations: color: Blue and font-size: 3em;. Lastly each declaration consists of two parts: the property color and the value Blue. Phew! Well done for making it this far. The terms above are good to know since it gives you a way to talk about your CSS.SEO Company

So, what’s wrong with your css, from what i see it works right how you want it to work

_________________________

jocuri masini - jocuri barbie

1.Write a paragraph of text and add an image at the beginning of the paragraph (before the text, but after the tag):

If you want to float the logo and doesn’t want to use table then you should ajax and make as a layers.

Bahnyen - 16 November 2010 04:58 PM

If you want to float the logo and doesn’t want to use table then you should ajax and make as a layers.

Yeah, that’s the right way to do it.

ciddiadam - 12 October 2010 07:48 PM

1.Write a paragraph of text and add an image at the beginning of the paragraph (before the text, but after the tag):

<p>
<img src="blwebcam-sample.jpg" alt="Suni" />
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. Sunt in culpa quis nostrud exercitation excepteur sint occaecat. Mollit anim id est laborum.
</p> 

2.Add a style attribute to the image, and apply the float property:

<img src="blwebcam-sample.jpg" alt="Suni" style="float:left;" /> 

3.Your text will be rammed right up against the image, so add some margins to the image to make it easier to read:

<img src="blwebcam-sample.jpg" alt="Suni" style="float:left;margin:0 5px 0 0;" /> 

Care to explain on this a bit more?

If you want to float the logo and doesn’t want to use table then you should ajax and make as a layers. I’ve just visited this forum. Happy to get acquainted with you. Thanks.

______________________________________
Motor Generators

If you’re not planning to support IE Mac, there are many rules and filters you may want to remove.

Because border and width adds up, this styling is making columns drop in IE 6 and 7. We could cheat with the value

Bahnyen - 16 November 2010 04:58 PM

If you want to float the logo and doesn’t want to use table then you should ajax and make as a layers.

Would like to try this.  Do you have any samples I could have a look at, though?

Thanks,
Panlegis

You don’t know the exact width of any column. You want a couple to shrink to whatever is in there, that is different. Now, a floated element will shrink to fit content if you do not specify a width, a useful feature. So let’s stick a couple of floated elements in the container above:

photon43 - 17 February 2010 02:26 AM

OK so I am trying to do something I know how to do in a fixed width layout (or in a menu that is a specific width) but can’t seem to get working in a fluid width.
This all takes place in the 82px tall header. all of this should happen on the same line and never break to the next:

I want to float a logo left and then float another image all the way to the right BUT have a single line of text (in an <h1> tag) in the middle between them. The logo should always stay left and the other image should always be at right when the browser is resized. The text should always fall in the center when the browser is resized as well. I do not want to use a table. In fact, this all comes from a “redesign” of a site that is using tables to accomplish this very thing. And I could just do that again. But I have been asked to get it done table-less - Plus, I just want to.

The site that has this going on with the table is this: http://www.bmmg.us

SO in my CSS code I have the following:

*{padding:0;margin:0;}
#body-wrap{width:auto; height:auto; margin:0 auto 0 auto;}
#header{width:auto;height:82px;background:url(img/header-bg.jpg) repeat-x top;} /*this is the header container*/

        #logo{background:url(img/BMAHeader.jpg) no-repeat top; height:82px; width:384px; float:left; }/*this is the logo container*/
        #tag{height:82px; display:inline;float: left;} /*this is where the text is*/
        #tag2{float:right; display:inline; background:url(img/headerright.jpg) no-repeat top; width:311px; height:82px;} /*this is the 2nd image's container*/ 

Markup:

<div id="body-wrap">
        <div id="header">
            <div id="logo">
                 </div>
                <div id="tag">
                        <h1>www.bmmg.us</h1>
                </div>
                <div id="tag2">
                </div>
        </div>
</div> 

I would really like to get the CSS to behave exactly like the table version does (http://www.bmmg.us). The “<h1>www.bmmg.us</h1>” should “float” in the center of these two images AND if the browser resizes to a width smaller than the content allows for, the image and/or text should NOT drop to the next line. Scroll bars should appear instead.

This really does not seem like it should be that hard and it certainly does not seem that a table can do something better than a div can. That’s crazy talk, right!?

Anyway, please help out. Thanks y’all!

Dan

How to use this code ?

You can use that technique to turn the previous fixed-width, three-column layout into a fluid, three-column layout.

I believe you have to use fixed width. Try 3 columns as suggested with the middle being a variable width.
_____________________________
Sudoku - Flash Game - Flash Game
Flash Game - xnxx - Flash Game

miguel - 15 March 2011 11:25 PM

I believe you have to use fixed width. Try 3 columns as suggested with the middle being a variable width.

But what if we can take this even further and attempt a three-column layout with a fluid content area? Not only can we do this, we can do it surprisingly easily! We’ll need to make a few final tweaks to our XHTML by adding a few more divs — and then we’ll be ready to write some more CSS saç ekimi.