CSS Troubles

  • Hi there!

    I am having troubles with my css I think. I have been able to use these following codes for the main content parts of my website, but as you can see in this image the layers overlap. Now that only does that in some google chromes and some IE’s, and looks just fine in others. Here is my current coding:

    .one-sidebar-left #pagelines_content #sidebar-wrap {

    background: rgba(109, 101, 120, .9);
    color: #FFFFFF;
    position: fixed;
    width: 290px;
    height: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    align: center;
    }

    my other problem is in the sidebar, where I have my design branding, it goes wherever it wants. Is there any CSS (or HTML) that I can use to fix that and make it stick to the bottom?

    Thanks,
    Reggie

    You can view this website for yourself here!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Why have you used fixed positioning?

    Thread Starter reggie_winters

    (@reggie_winters)

    Andrew, the reason is, if I do not put “position: fixed;” the sidebar and the content does not even line up side by side, but on top of each other. It looks like this!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    All you need to do is float the elements left/ right and give them a width, to get them aside one another
    https://cssdesk.com/YWqHX

    Thread Starter reggie_winters

    (@reggie_winters)

    Now it looks like this. Still overlapped. Here is all of my css that I have added that applies to the left/right content.

    .one-sidebar-left #pagelines_content #sidebar-wrap {

    background: rgba(109, 101, 120, .9);
    float: left;
    color: #FFFFFF;
    width: 50%;
    height: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    align: center;
    }

    .one-sidebar-left #pagelines_content #column-wrap {
    top-margin: 10px;
    background: rgba(109, 101, 120, .9);
    color: #FFFFFF;
    height: 100%;
    width: 50%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    align: right;
    float: right;
    }

    Thread Starter reggie_winters

    (@reggie_winters)

    Sorry, I did manage to get them perfect! Thanks. Do you have any tips on how to make them stick to the bottom of the screen though? It currently looks like this and I would like for the content to stick to the bottom (especially the sidebar) like it was before ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Troubles’ is closed to new replies.