CODEWITHSUNDEEP
htmlcss
Daniel Williams
Daniel Williams

Reputation: 2317

Div repositioning in responsive web design

<html>
<head>

<style type="text/css">
.floatleft {
    border: 1px solid blue;
    float: left;
}
.floatright {
    border: 1px solid red;
    float: right;
}

@media screen and (max-width: 800px) {
    #div1 {
        float: none;
    }
}
</style>

</head>
<body>

<div id="div1" class="floatleft">Div 1</div>
<div id="div2" class="floatleft">Div 2</div>
<div id="div3" class="floatleft">Div 3</div>
<div id="div4" class="floatright">Div 4</div>

</body>
</html>

I'm doing my first RWD project and I'm struggling to understand how the repositioning of divs work upon resize.

In my code example, on resizing to 800px div1 will move above all the other divs, which is what I want, but what I'm finding difficult is how would I move div4 to the right of div1 as per my picture below.

enter image description here

Upvotes: 0

Views: 102

Answers (3)

oqx
oqx

Reputation: 2367

you are sort of on the right foot, you need to only call the pull-right class on div 2 and have it on the first one, the div one will have display default which is block and the other 2 will have display inline to be next to each other.

    <div id="div4" class="floatright">Div 4</div>
<div id="div1">Div 1</div>
<div id="div2" style="display:inline;">Div 2</div>
<div id="div3" style="display:inline;">Div 3</div>


div{
    border: 1px solid blue;
    display:inline;
}

.floatright {
    border: 1px solid red;
    float: right;
}

see fiddler

Demo fiddler

Upvotes: 1

Max Baldwin
Max Baldwin

Reputation: 3472

You should wrap divs 1, 2 and 3 in a parent div that is floating left. Then your div 4 can float right on its own. Adjust the widths accordingly.

<div id="parent" class="floatleft">
    <div id="div1">Div 1</div>
    <div id="div2" class="floatleft">Div 2</div>
    <div id="div3" class="floatleft">Div 3</div>
</div>
<div id="div4" class="floatright">Div 4</div>

See this fiddle

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

You could set a percentage width for both, div1 having say 80% width and div4 having say 20% width? Although, div4 will have to be below div1 in the html for that to work.

Do you not have any widths set right now?

Upvotes: 0

Related Questions