WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Stop a div using 100% width

Reply
  Thread Tools Display Modes
Old 22nd October 10, 04:32 PM   #1
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Stop a div using 100% width

Does anyone know how I can stop a div using 100% of the width of it's container(parent).

I can't use a <span> in this instant as inside this div I have an <img> and <p> tag.

I also don't want to have to define a width because this should just be a universal container.

Thanks.
sheferd is offline   Reply With Quote
Old 22nd October 10, 09:00 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Stop a div using 100% width

Set display:inline;

It does not change it's inherent nature (a block element) merely the way it displays.
chrishirst is offline   Reply With Quote
Old 22nd October 10, 11:04 PM   #3
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: Stop a div using 100% width

Hi chrishirst,

Thanks for the reply, unfortunately for this instance it didn't seem to work.
sheferd is offline   Reply With Quote
Old 22nd October 10, 11:53 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Stop a div using 100% width

define "didn't seem to work"
chrishirst is offline   Reply With Quote
Old 23rd October 10, 12:02 AM   #5
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: Stop a div using 100% width

Sorry,
I have a background color on the div I'm trying to not span 100%
but when I apply display:inline it displays a small block of that background color about the height of 1 line (of text) then breaks the rest of the div and then displays another small block of background color at the end of all of it.
As if it is running as one long line.
sheferd is offline   Reply With Quote
Old 23rd October 10, 12:12 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Stop a div using 100% width

That's what inline does. It fits element width to the content, and the element will stay on the same line (horizontal plane) as the preceding element.

If you show us code and what you want to accomplish it will give us more chance.
Guessing what you actually want is not the best way.
chrishirst is offline   Reply With Quote
Old 23rd October 10, 12:24 AM   #7
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: Stop a div using 100% width

This is the css:
Code:
.image-w-caption{
        padding:20px;
        margin:20px auto;
        background-color:#ed689b;
        color:#ffffff;
	overflow:hidden;
        }
        .image-w-caption img{
		padding:0;
		margin:0;
		border:none;
		float:right;
		}
	.image-w-caption h3{
		width:auto;
		padding:0;
		margin:0;
		}
        .image-w-caption p{
		padding:0;
		margin:0;
		color:#ffffff;
		}
and the html:
Code:
<div class="image-w-caption">
    <a href="#">
        <img src="http://www.taralee.co.uk/pimages/medium_414_flowergirl_dress_redbow_back.jpg" />
    </a>
    <h3>Heading...</h3>
    <p>Lorem ipsum d...</p>
</div>
Unfortunately I'm unable to link to a page as it's in testing and pw protected.
sheferd is offline   Reply With Quote
Old 23rd October 10, 07:16 AM   #8
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Stop a div using 100% width

and the layout you are trying to achieve is?

because looking at the code suggest that a 100% element would be in order.
heading full width, image to the right caption to left.

Although you should have overflow: auto on the parent rather than overflow: hidden;
chrishirst is offline   Reply With Quote
Old 23rd October 10, 04:09 PM   #9
sheferd
WLC Member
 
Join Date: Aug 2010
Location: Liverpool (but I'm from the south)
Posts: 40
Default Re: Stop a div using 100% width

The situation is I have a container that is 656px wide but the image-w-caption div should only be as wide as it's content about 300px upwards.

Also I have used overflow:hidden as auto stopped the div from completely wrapping it's content vertically.
If I had an image that was taller than the amount of text inside p tags.
And as I haven't defined a height nothing is hidden.
sheferd is offline   Reply With Quote
Old 23rd October 10, 05:10 PM   #10
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Stop a div using 100% width

Quote:
auto stopped the div from completely wrapping it's content vertically.
That is because the floats haven't been cleared when you return to the document flow.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:06 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.