Text affects DIVs in a bad manner

[clipp]

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;
}

[clipp]

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;
}

[clipp]

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

[Alen]

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

[clipp]

Thanks Alen,

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

[Alen]

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

[clipp]

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?

[Alen]

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

[clipp]

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

[clipp]

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

• Work
• Blog
• About
• Contact

**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;
}

[clipp]

Ok, that’s better possibly:

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

[Author]

Posts