html - Make div same as normal text using CSS

Question

I want to make my website responsive,

When the width is less than 1024px, I need to add the div menu-item to the menu.

I need to use this when the width is more than 1024px

<div id="menu" >
    HOME
    TOP40
    DJS
        <div id="br"></div>
    SHOUTBOX
    VERZOEKJES
</div>

And when the width is less than 1024px, I need to use this

<div id="menu" >
    <div id="menu-item">HOME</div>
    <div id="menu-item">TOP40</div>
    <div id="menu-item">DJS</div>
        <div id="br"></div>
    <div id="menu-item">SHOUTBOX</div>
    <div id="menu-item">VERZOEKJES</div>
</div>

So when the width of the screen is more than 1024px, I want to make the #menu-item the same as text, I already tried float: left; but that wasn't working.

Sorry, I don't know what kind of code's you need so Live demo is at random-radio.net

Answer 1

You need to read up on CSS media queries, here's a good article: http://css-tricks.com/css-media-queries/