Thanks so much for your help Chris Unfortunately I can't set a fixed height to the border wrapper as both the image and the text will be variable :( I've replaced my align: left with float: right, but for the life of my can't work out what container to clear. I think I've tried all of them and still not seeing the result that I was after :(
A On Thu, Sep 30, 2010 at 4:12 PM, Chris Blake <[email protected]> wrote: > Hi, > > I don't really know about hspace and vspace so i took them out. Your > align="left" is what's causing the border to come half way up your image. > If you remove it you will see. However the text does not fit, wrap around > the image as you may want so you'll need to <img style="float: left;"> and > you'll get the desired effect. However it'll go back to the same problem > that you had at the start - this is where 'clearing floats' comes in and is > very fundamental in creating browser friendly CSS websites. > > Usually a class is made, with the desired attributes and whenever you need > to clear a float like in this instance you ca add the class e.g. image, > text, clear - or text, image, clear. > > If you are in a hurry then just assign a height to the border wrapper i.e. > height: 200px; But you should try to understand floats and clearing floats. > > hope it helps, CB > > > > On 30/09/2010, at 2:22 PM, Anthony wrote: > > Sorry about that. Hope it makes more sense now: >> >> <html> >> <head> >> <style> >> #block-12 .blockinner { >> background-color: #F2F2F0; >> margin:0 auto; >> border: 1px solid red; >> } >> #block-12 .blockinner .top { >> height:50px; >> width:100%; >> } >> #block-12 .blockinner .border { >> margin:-44px 0 0; >> padding:1px 6px; >> position:relative; >> } >> #block-12 .blockinner .bottom { >> height:7px; >> width:100%; >> } >> </style> >> </head> >> <body> >> <div id="block-12"> >> <div class="blockinner"> >> <div class="top"> </div> >> <div class="border"> >> <h2 class="title">This is a title.... which I dont really care about >> ....</h2> >> <div class="content"> >> <p><a >> href="http://www.google.com";><img<http://www.google.com%22%3e%3cimg/>hspace="5" >> >> >> height="121" align="left" width="256" vspace="5" >> title="slkdfjsdlkfjdlskfjdlkfj" alt="dslfk ldsfj dlskfj dlkfj " >> src="sdfsdfdf.jpg"></a>I dont really care about this text either.... I >> just >> wish that the red border would include the image on the left, and be >> wrapped >> around it nicelly, as opposed to half way down the image...</p> >> </div> >> </div> >> <div class="bottom"> </div> >> </div> >> </div> >> </body> >> </html> >> >> On Thu, Sep 30, 2010 at 3:40 PM, Chris Blake <[email protected]> >> wrote: >> >> Hi, >>> >>> I copied the code into my editor and redered it. It's abit hard to see >>> what >>> you're trying to do. Can you explain a bit more.. is it for a header? >>> Could >>> you replace the dummy content with somethig a bit more meaningful because >>> the text over the image, and text next to it is that same so it's just a >>> bit >>> of a mess. It also seems like you have a lot of wrappers happening which >>> might not be needed. >>> >>> Cheers, CB >>> >>> >>> >>> On 30/09/2010, at 10:17 AM, Anthony wrote: >>> >>> Hi all >>> >>>> >>>> I have been trying to figure out how to wrap the background around the >>>> image on the left, so that the image doesn’t stick out outside the >>>> background. But I haven’t had any luck. Any help would be greatly >>>> appreciated. >>>> >>>> <html> >>>> <head> >>>> <style> >>>> #block-12 .blockinner { >>>> background-color: #F2F2F0; >>>> margin:0 auto; >>>> } >>>> #block-12 .blockinner .top { >>>> height:50px; >>>> width:100%; >>>> } >>>> #block-12 .blockinner .border { >>>> margin:-44px 0 0; >>>> padding:1px 6px; >>>> position:relative; >>>> } >>>> #block-12 .blockinner .bottom { >>>> height:7px; >>>> width:100%; >>>> } >>>> </style> >>>> </head> >>>> <body> >>>> <div id="block-12"> >>>> <div class="blockinner"> >>>> <div class="top"> </div> >>>> <div class="border"> >>>> <h2 class="title">slkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj </h2> >>>> <div class="content"> >>>> <p><a href="http://www.google.com";><img hspace="5" >>>> height="121" align="left" width="256" vspace="5" >>>> title="slkdfjsdlkfjdlskfjdlkfj" alt="dslfk ldsfj dlskfj dlkfj " >>>> src="sdfsdfdf.jpg"></a>lsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj >>>> lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f</p> >>>> </div> >>>> </div> >>>> <div class="bottom"> </div> >>>> </div> >>>> </div> >>>> </body> >>>> </html> >>>> >>>> A >>>> ______________________________________________________________________ >>>> css-discuss [[email protected]] >>>> http://www.css-discuss.org/mailman/listinfo/css-d >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>>> List policies -- http://css-discuss.org/policies.html >>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >>>> >>>> >>>> >>> ______________________________________________________________________ >> css-discuss [[email protected]] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
