I have an image, which is floated left from some text:
<ul class="row">
<li class="col-sm-6">
<img src="asset.svg" style="float:left;width:50px;height:50px;">
<div>some text</div>
</li>
<...etc...>
The result I get from this (with .png as well) is attached:
The width of the images seems to be dictated by the neighbouring div. Anyone know why this happens and how best to get around it?
First step: Properly close the IMG-tag with /> .
Second, does the div some text also have float:left ?
If the li has by example a width of 200px, and the img tag has a width of 50px, the div some text should have a width of 150px and float:left.
Hope that works for ya
Your question is not quite clear, you should try and upload more details.
But you can try clear: both in your CSS code.
Related
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
Please check out this image
<body>
<div class="main>
<div class="left">blah blah </div>
<div class="right">blah blah </div>
<div style="clear:both"></div>
</div>
</body>
CSS part:
.main{min-width:1200px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }
I hope friends, you have got an idea from the image. Please help me.
I am dynamically inserting data into right div and when its width exceeds 800px, it comes down the left div. But instead of that I want a horizontal scrollbar to view the content. One solution may be, removing float:left from right div. But still it causes problem.
on floated elements, height:auto means the height of the content (the default for floated elements). try with height:100%
we have CSS:
#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img, #right img{float:center; vertical-align:middle;cursor:pointer}
Image is horizotal centered, but gets top aligned (i want middle)
html looks like
<div id="media">
<div id="left"><img/></div> <div id="right"><img/></div>
</div>
Any idea what i'm doing wrong?
By the way, all this problem it's because i'm displaying images with different resolutions :S
EDIT
This didn't help... :(
#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}
you can vertical align an image in a div that has no text in it by setting line-height on the on the div. example:
<div style="height: 100px; line-height: 100px;">
<img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>
You'll first off need to have some height declared on #left or #right to get it to align vertically. (As it is, it has no more known space to align vertically in than the space it's taking up--so it will always appear top-aligned.)
Secondly, make sure you understand vertical-align correctly. Here's a good resource: http://phrogz.net/css/vertical-align/index.html In short, vertical-align is probably not the best solution.
vertical-align on an image is how the text aligns to the image, the way the text wraps around the image. Not the way the image is displayed in the div.
Please see this on StackOverFlow
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/
Why gose to image's flow
This is code:
<p><img class="left" width="95" height="64" src="#" />
some text here some text here some text here some text here some text here some text here
</p>
<ul>
<li>some text here some text here some text here some text here some text here some text here some text here
</li>
</ul>
Probably because
the image is float: left
either the <ul> or the <li> or both is display: inline
I assume you want to keep the left float of the image. To get the <ul> onto its own line,
you could give it a display: block; clear: left; to sort it out.
Because you're floating the image left. That's what happens. The bullet is behind the picture.
Presumably because a CSS rule-set that applies to the element includes the rule float: left
Remove class="left" :)
If you have control over the .left class, add some padding or margin to the right side of the image.
.left {float:left;padding-right:2em;}
or
.left {float:left;margin-right:2em;}
The exact amount of padding/margin you need depends on how the list is styled - you want to add enough so that the list bullet doesn't overlap the image, but the paragraph and other stuff doesn't go too far to the right.
Which of padding-right or margin-right to use depends on what else is going on in the page, what browser(s) you are using, and somewhat also on personal preference. Try each and see which one works better in your situation.