Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image Padding / Margin Issue

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #255705
    belfastrab
    Participant

    Hello

    I am hoping someone can help me I have got myself very confused and spent literally hours trying different solutions from countless of online sources and just can’t figure it out.

    http://www.techteamni.com/test (.caseright div)

    I am have made a website with my somewhat limited understanding of css and for the most part it’s fine but I have a case studies section in the middle which is broken down into a larger featured case study and a few mini ones. The first mini one is the problem I am having. There is a image (guy with glasses) on the left hand side and then there is a title and paragraph on the right of this image. At first I was having trouble with the paragraph text wrapping under the image until I eventually found a fix online to sort that and then I wanted the image to automatically fill 100% of the height of it’s containing div and again sorted that. The problem is now:

    I cannot for whatever reason apply a margin or padding to the right of the image to push the title and paragraph text away from the image. I can apply a left margin and or padding to the title and paragraph which works fine until more or less paragraph text is added / deleted and then the margin / padding needs to be changed to suit so that’s why I need the image to move the text and not the text to move itself.

    Perhaps what css is currently applied to the div / img to achieve the 100% height is wrong I really don’t know. All I would like is for the image to be 100% height and push the text to it’s right away so that when I convert the html to a cms anyone changing the content it will automatically look correct.

    Sorry probably have not explained this too well.

    Thanks

    Rab

    #255712
    Paulie_D
    Member

    That’s the problem with positioning.

    Ideally your grid-3 div should be further divided into 2 additional sections. The first containing the image and the second the text.

    Floating the image is, apparently, not an issue since you don’t want the text to wrap underneath.

    There are a few options to layout the 2 sub-sections though.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.