Image Position in Sidebar

  • thatnight

    (@thatnight)


    19 years, 2 months ago

    I understand that with a sidebar, it’s common to have some padding on the left and right, so that the text isn’t running right up against the side of it.

    I was just curious how one would keep these common settings and also add an image which, on the other hand, is completely flush against the edge of the sidebar.

    Demonstrations are shown here:

    http://www.woostercollective.com/ (with the section title images)

    http://blurbomat.com/ (with the green bubble/leaf thing)

    Thanks in advance for any insight!

Viewing 1 replies (of 1 total)
  • Eric Amundson

    (@sewmyheadon)

    19 years, 2 months ago

    Hey thatnight, this can be accomplished pretty easily using CSS via different tactics. One way might be:

    If you had a container div for your sidebar, lets assume it’s called #sidebar. Avoid assigning padding to the #sidebar dive because it will affect all elements contained within.

    Rather, if you have paragraphs, lists, or headers within the #sidebar, you can assign them margin or padding to create horizontal space between these contained items and their container.

    Then for your images, you can place them as backgrounds to divs, list items, defined terms, etc.

    Alternatively, you can assign padding to the #sidebar div, which will affect all sub-elements, but then just use absolute positioning to place the images.

    Your solution will really depend on how the images fit into your design. If they’re to be the background for a header or dt, absolute positioning is likely overkill.

    I hope that helps.

Viewing 1 replies (of 1 total)

The topic ‘Image Position in Sidebar’ is closed to new replies.