I know why I had the left margin for .fr at 26. At one time that’s about how far in from the right the image was, so at some point I adjusted the image withe the 26pc to center the image. Then for some reason the image position chnaged to all the way right.
I applied those two centering pieces of code
center { display: table; margin: auto} and
.cntrimg{display:block;margin-left:auto;margin-right:auto}
separately to the UL but they had no effect. I also tried, from your page http://www.pmob.co.uk/temp2/float-wrap.html , the code margin:0 0 15px.to try to center the UL, but no luck. So how do you center a floated image to adjust for white space?
<!DOCTYPE html>
<html>
<head>
<title>8-4</title>
<style>
.fr {
float:right;
margin:0 0 20px 10px;
}
.wrapper {
overflow:hidden
}
@media screen and (max-width:480px) {
.fr {float:none;
display:block;
width:100%;
height:auto;
margin:0 10px 10px 0px}
ul {width:112px;float:left;margin-left:auto;margin-right:auto} }
@media screen and (max-width:300px) {
ul {width:112px;margin-left:auto;margin-right:auto}
#* {outline:1px solid #f00}
</style>
</head>
<body>
<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="280">
<ul style="padding-right:25px">
<li>
<h1>aaa bbb ccc a c</h1>
</li>
<li>
<h1>aaa bbb ccc v</h1>
</li>
<li>
<h1>xyza bc de fghi kln</h1>
</li>
</ul>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2><p>Is diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet</h2> <p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</body>
</html>
It sounds to me that you are not happy with the white space that exists to the right of the <h2> headlines at narrow widths, is that correct?
If so, that space is normal. It is the left-over space at the end of a line when text wraps because the next word would not fit in that space. You can apply h2 {text-align:justify} in a media query, but because of the size of the font and the narrowness of the page, it won’t look good.
Ron, when the browser is narrowed to a certain pont, there’s white space, a fair amount, right of the ul, so I need the the ul (112px wide, floated left) centered between the left side and the left side of the paragraph text, even though the ul is floated left.
No. The white space that exists to the right of the h2 headlines is fine.
I use the #* to show all borders when I need to by removing the pound sign. Here’s an image of the white space right of the ul (left of the text).
Your wish is not possible. One cannot expect an element that is floated to be centered. That defeats the very purpose of a float. To center the element, you must remove the float.
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>8-4</title>
<style>
.fr {
float:right;
margin:0 0 20px 10px;
}
.wrapper {
overflow:hidden
}
@media screen and (max-width:480px) {
.fr {
float:none;
display:block;
width:100%;
height:auto;
margin:0 10px 10px 0px;
}
ul {
width:112px;
float:left;
}
}
@media screen and (max-width:25em) {
ul {
float:none;
margin-left:auto;
margin-right:auto;
}
}
/* {outline:1px solid #f00;} /* */
</style>
</head>
<body>
<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="280">
<ul style="padding-right:25px">
<li>
<h1>aaa bbb ccc a c</h1>
</li>
<li>
<h1>aaa bbb ccc v</h1>
</li>
<li>
<h1>xyza bc de fghi kln</h1>
</li>
</ul>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<p>Is diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet</h2>
<p>Dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>
</body>
</html>
Please note: the viewport tag is NOT OPTIONAL.
Why do you have padding-right:25px inline in the <ul> tag?
The image above looks nice until you narrow the browser just a little more and then the paragraphs jump down leaving the white space pictured in the image obove this one.
When the browser is narrowed to a certain pont, there’s white space, a fair amount, right of the ul, so I need the the ul (112px wide, floated left) centered between the left side and the left side of the paragraph text, even though the ul is floated left.
On Paul’s page the image was floated left, but then centered in a white space. I’m not sure why I don’t see it now. If it can be done with an image, why not a ul?
That looks great. Why were you saying it can’t be done when you’ve already done it? I thought you listed that code to show me something else you were saying. Thanks a bunch Ron.
You know I found a number of pieces of code where the author claimed the code centered the floated ul but didn’t work for me. It seems that writing css creates restrictions, so one person with one chunk of code trying to add some feature or nicety can make use of a fix but another person with a different chunk of code has no success with the same fix. The only way I can see that happening is if writing code is also writing restrictions. Maybe that’s not true and I jsut didn’t implement the fixes correctly. What do you think, probably the latter :-)?
Just for completeness, I’m adding one more screen show to show what could be done at this point, then I’ll answer your post. The left-most screen shot can be changed to either of the right two layouts in a media query that is triggered just just a couple of px narrower than the left shot.
"Appreciate the effort but what you don’t see in the third pane is the white space when the browser is widened, but I can widen the UL so it fills better in the second pane.
There are no items that are floated and centered at the same time in the layout. To center the <ul>, the float had to be turned off, {float:none;} in that last media query.
Yes, you can change the width of the <ul> to anything that you wish. I would recommend that you set the width of the <ul> to a percent value less than 100%, maybe 90%, and see how that looks. It will be centered by virtue of {margin-left:auto} and {margin-right:auto} that you have applied. You might try changing the width of the <ul> to auto in the last media query and see how the white space looks. It may look OK to you.
FYI: In the third pane, I deleted the paddings on the left and right sides of the <ul> in my home copy for the sake of that screen shot. You can see that the code that I posted for you in post #85 includes your paddings intact.
I didn’t realize you didn’t keep the UL floated. Oh I see, left floating of the UL isn’t needed when the pragraphs drop down, so at the time (the width) of the paragraphs dropping down, you have the left floating stopped and start the auto left and right of the ul. Nifty. Thanks again.
