Forums

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

Home › Forums › CSS › Issue with div not lining up when using media query

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 1, 2014 at 12:23 pm #164469
    mrhines1
    Participant

    I am attempting to make my site responsive but have run into an issue where one of my divs won’t align with the rest when the site is using the media query CSS.

    I basically have two divs (a main and a sidebar) inside a content div. They work fine using the “normal” CSS, however when I minimize the browser size the sidebar div moves below the main div (like I want it to) but it doesn’t center like the main div. It sits up against the left side of the browser window.

    Here is my HTML:

    <div id="content">

  <div id="main">
    <h2>Business</h2><hr><p>Whether you need an informational site to let your customers know what your company can do for them or an e-commerce site capable of providing a complete online shopping experience, I can help.</p>
  </div>
  <!--endMain-->

  <div id="sidebar">
    <h2>Individual</h2><hr><p>Take advantage of an online presence and stand out from the crowd.  Online resumes and portfolios make it easier to be found by potential employers and clients and let you keep your information current.</p>
  </div>
  <!--endSidebar-->    

</div>
<!--endContent-->

    And my CSS:

    /* Normal CSS */

    content { background:#fff; border-bottom:1px double #5d585c; float:left; margin:20px 0 0 0; padding-bottom: 2%; width:96%; }

    main { background:#fff; padding-left:8.5%; width:39.5%; }

    sidebar { background:#fff; padding-right:8.5%; width:39.5%; }

    /* Media Queries */
    @media screen and (max-width: 480px) {
    #main { background:#000; padding:2%; width:100%; }
    #sidebar { background:#000; margin-top:20px; padding:2%; width:100%; }
    }

    I think it’s something simple. I’m just not seeing it though.

    March 1, 2014 at 3:52 pm #164474
    Atelierbram
    Participant

    #sidebar { padding-left: 8.5%;

    on Codepen

    March 1, 2014 at 6:50 pm #164480
    mrhines1
    Participant

    Thanks. I tried it but it didn’t work.

    Here’s a link to my site if you want to see the full code:

    Portfolio

    March 2, 2014 at 2:43 am #164488
    Atelierbram
    Participant

    When making this a specificity battle

    @media screen and (max-width: 480px) {
  #sidebar {
    background: #fff;
    margin-top: 20px;
    padding: 2%;
    width: 100%;
    float: none !important;
    }
}

    Doing it like this, float: none !important or float: left !important will override the float: right on the body #sidebar, body.ms #sidebar outside of the media-query. Curious about the tools you use, and current workflow. Do you check your site sometimes with W3C validator?

    Can you maybe share:

    • why you prefer id– over class-selectors in your CSS
    • reasons why you use the XHTML strict doctype, instead of HTML5 <!doctype html>

    Seeing a lot of ‘issues’, and don’t want to be pedantic, for instance: including the jQuery library three times is supposedly by accident.

    updated Codepen

    March 2, 2014 at 9:24 am #164504
    Atelierbram
    Participant

    @wolfcry911 very solid analysis indeed; so kudos from me too.

    Updated the Codepen with those recommendations, which also applied to the contact-form, and used overflow: auto to clear the floats.

    March 2, 2014 at 12:44 pm #164514
    mrhines1
    Participant

    Thanks for the responses!

    Looks like I have some work to do.

    As of now, web design is a hobby and I occasionally do a site for people I know. I would like to eventually turn it into a career but I still have a lot to learn. I’m considering signing up for the Lodge here for some lessons.

    As far as the CSS I used for my site? I actually had a job interview and was asked by the interviewer to use their company’s base code to lay out my portfolio site. So their code is the framework for what I have. I started messing around with it this past week to make it responsive (again, still learning). But since web design is their business I didn’t question what doctype or use of div versus class selector made sense.

    @Atelierbram, I just use Sublime Text for writing and editing code and I have not used the W3C Validator. Thanks for your help.

    @wolfcry911 and @jurotek thank you very much for your inputs too.

    I’ll make my updates when I have some more free time.

    Again, I appreciate the feedback and am always looking to learn more. Is the Lodge worth investing time in?

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