CODEWITHSUNDEEP
htmlcss
imhere
imhere

Reputation: 5005

Adjust page content to the browser window width

I am working on a page where it needs to adjust to the width of the browser. When the browser window is stretched, the 'content' needs to grow (got that part working!) and when the window shrinks beyond a minimum width, the page structure needs to stay intact. So I should be able to scroll to see the 'sidebar' but it jumps down. Please help!

Here is what I have tried so far -

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;">

    <div id="content" style="width:54%;
    float:left;
    min-width:400px;
    height:400px;
    margin-right:3%;
    border:1px solid green;">
    </div>

    <div id="sidebar" style="width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;">
    </div>

</div>

Thanks.

Upvotes: 1

Views: 2271

Answers (5)

sun
sun

Reputation: 1668

Is this what are you looking for? check this

<div id="wrapper" style="width: 90%;
    margin: 0 auto;
    height:400px;
    background: #fff;
    padding: 20px;
    border: 1px solid blue;">

    <div id="content" style="width: 54%;
    float: left;
    height:400px;
    margin-right: 3%;
    border: 1px solid green;"> Content </div>

    <div id="sidebar-left" style="  width: 31%;
    float: left;
    margin-right: 3%;
    height:400px;
    border: 1px solid yellow;"> Sidebar </div>
</div>

Upvotes: 0

Matthew
Matthew

Reputation: 9949

Set a min-width: 850px; on the wrapper. Or whatever you want your minimum to be. Put your sidebar first and float it right:

Fiddle: http://jsfiddle.net/mdares/JEVfC/

#wrapper {
    width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;
    min-width: 850px;
}
#content {
    min-width:400px;
    width: 54%;
    height:400px;
    margin-right:3%;
    border:1px solid green;
}
#sidebar {
    width:350px;
    float:right;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;
}

Also - if you don't want the gap between them to grow, set a margin-left: 3%; on #sidebar. On #content, remove the width: 54%; and add overflow: hidden;

Upvotes: 1

fiskolin
fiskolin

Reputation: 1421

Are you familiarized with @media query or Responsive Web Design? Is maded in CSS3. This might help you to design your web dependely the size of the viwer's screen.

How It Works

You need to set the maximum and the minimun with property, dependely (or not) the size of the screen (using @mediaquery). Check this

Solving your problem HTML

<div id="wrapper">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

CSS

#wrapper {
    max-width: 90%;
    width:100%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;
}
#content {
    max-width: 54%;
    width:100%;
    float:left;
    height:400px;
    margin-right:3%;
    border:1px solid green;
}
#sidebar {
    with: 100%;
    max-width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;
}

JSFIDDLE

Upvotes: 1

Aneesh Bhatnagar
Aneesh Bhatnagar

Reputation: 43

In your div class, add the minimum width parameter to the style so that it does not shrink below that! You can do that like this: 

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    min-width:500px; /* Enter whatever minimum width you want your page to be */
    border: 1px solid blue;">

    <div id="content" style="width:54%;
    float:left;
    min-width:400px;
    height:400px;
    margin-right:3%;
    border:1px solid green;">
    </div>

    <div id="sidebar" style="width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;">
    </div>

</div>

Upvotes: 0

Roman
Roman

Reputation: 6408

you could define a minimum width:

#wrapper {
 min-width: 600px;
}

Upvotes: 0

Related Questions