Grow your CSS skills. Land your dream job.

Text affects DIVs in a bad manner

  • # June 17, 2013 at 2:51 pm

    Hey all,

    Here’s a question of a CSS beginner:
    Since I started to put text into a DIV this DIV-box
    has pushed the other boxes down.

    I don’t really understand why. Who has suggestions?
    Thanks a lot in advance :)

    [website](http://annikalyndgrun.de/testdom/index.html “website”)
    (The dotted lines are just to make the layout for you clearer.)

    HTML:


    magazin
    MOSCOW GUIDE
    Moskau: Bären, Wodka, komische Pelzmützen. Doch diese aufregende Stadt ist so viel mehr.



    CSS:
    .quarter {
    display: inline-block;
    position: relative;
    margin: 10px 10px 10px 10px;
    min-height: 170px;
    min-width: 150px;
    width: 20%;
    border: dotted;
    }

    # June 17, 2013 at 2:53 pm

    Sorry, I’ve dismissed the function.

    **HTML**


    magazin
    MOSCOW GUIDE
    Moskau: Bären, Wodka, komische Pelzmützen. Doch diese aufregende Stadt ist so viel mehr.



    **CSS**
    .quarter {
    display: inline-block;
    position: relative;
    margin: 10px 10px 10px 10px;
    min-height: 170px;
    min-width: 150px;
    width: 20%;
    border: dotted;
    }

    # June 17, 2013 at 2:56 pm

    Strange. Why I can’t see the HTML-tags inhere?

    # June 17, 2013 at 3:00 pm

    see [my comment](http://css-tricks.com/forums/discussion/comment/107304/#Comment_107304) on similar discussion.

    # June 17, 2013 at 3:06 pm

    Thanks Alen,

    So there’s no pure CSS solution in my case?

    # June 17, 2013 at 3:52 pm

    You have to clear the floats: here I’ve reworked the layout a bit, use it if it helps: http://codepen.io/anon/pen/Cgncu

    # June 17, 2013 at 5:14 pm

    Thanks Alan. I now just have the problem that the boxes don’t re-arrange when I make the browser window smaller (I have some responsive webdesign in my mind). So I guess I’ve reached the limits of CSS?

    # June 17, 2013 at 6:03 pm

    Your layout has to be percentage based, and you need to utilize Media Queries, if you’re thinking about Responsive design.

    If you need help with CSS layouts: http://learnlayout.com/toc.html

    If you need help with Media Queries: http://codepen.io/anon/pen/sJgkh (if you resize the browser you’ll see Media Queries in effect.

    You can also look at source code of http://responsive.gs/ grid

    And look into Mobile First, 320andup for some ideas: https://github.com/malarkey/320andup

    # June 17, 2013 at 6:10 pm

    Great, thanks a lot. I’ll grab deeper in this issue right now.

    # June 18, 2013 at 8:54 am

    Hey again,

    The navigation should be centered but I’v already tried a lot, nothing works:

    Can anybody help me?

    http://annikalyndgrun.de/testdom/index.html

    **HTML**

    ANNIKA LYNDGRUN

    GESTALTUNG

    **CSS**
    header {
    background-color: #00ff00;
    display: block;
    margin: 2.0em auto;
    font-size: 100%;
    margin: 3.0em auto 5.0em auto;
    }

    .navigation{
    background-color: #ff0000;
    height: 2em;
    display:block;
    }

    .navigation ul{
    display:inline;
    }

    .navigation ul li{
    display:inline;
    }

    # June 18, 2013 at 9:23 am

    Ok, that’s better possibly:

    [Your text to link here…](http://codepen.io/clipp/pen/sgGiC “http://codepen.io/clipp/pen/sgGiC”)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".