Images Not Lining Up in Container

  • Hi Everyone,

    I know this is such a small problem, but I’ve been playing with it so long now I need a fresh set of eyes to find the mistake.

    I’d like for my bio images and paragraphs to remain on the left side and my timeline image to appear on the right side of my about page, but can’t seem to get the timeline image to line up at the top of the bio container. Does anyone see where the issues are and why the two items aren’t lining up?

    the exact page is www.aimeemars.com/about/

    Any help would be much appreciated!

    Thanks,
    Aimee

Viewing 4 replies - 1 through 4 (of 4 total)

  • Please tell us the name of the theme you are using and where you downloaded it.

    Thread Starter aemars

    (@aemars)

    I actually designed and coded it myself. Is there any other information you need?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Your widths are wrong, and you have improper nesting of the sidebar.

    
<div class="sidebar-about">
<aside class="sidebar-about">

    You have a div with class sidebar-about, and it contains an aside with the same class. In the CSS, you have the width of .sidebar-about set to 60%. This applies to both of them, making your actual aside area there 60% of 60%.

    In addition, both the bio div and the sidebar-about div are in another div with a class of bio-container. The bio-container has a width of 1260px. The bio has a width of 550px. The sidebar-about (div) is 60% of 1260px which is 756px. 756px + 550px = 1306px so the two sub-divs cannot float side by side, since they’re too wide together to fit into the space for them.

    Fix the sidebar-about first, probably by removing the aside or the div entirely and then style the widths of the result correctly so they fit into the bio-container.

    Few changes are required

    .bio-container {
    width: 100%;
}
    .bio{
width: 40%;
}
    .sidebar-about{
float: right;
    display: inline;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

    Remove .sidebar-about from <aside

    P.S: play around with the width until you find the best fit.

    • This reply was modified 7 years, 7 months ago by luckychingi.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Images Not Lining Up in Container’ is closed to new replies.