Jump to content

Responsive center column help.


iPixel

Recommended Posts

I'm trying to figure this out... i have a 3 column layout and i need the center column to resize automatically as the browser shrinks.

The idea here is to NOT use @media queries and pixel breakpoints. Which is why the #wrapper & #mid divs are set to 100% width.

 

However the issue is that instead of the center column getting thinner, all the columns just pop down. My CSS bl0wz, so any help would be appreciated. Below is what i have so far.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</title>
</head>


<style type="text/css">


html, body { padding:0px; margin:0px; }


#wrapper {
max-width:1024px;
width:100%;
padding:0px;
margin:0 auto;
background:#CCC;
}


#left {
float:left;
max-width:190px;
min-width:190px;
width:190px;
height:500px;
background:#9CF;
}


#mid {
float:left;
max-width:644px;
min-width:190px;
width:100%;
height:500px;
background:#9C6;
}


#right {
float:left;
max-width:190px;
min-width:190px;
width:190px;
height:500px;
background:#CC6;
}


</style>


<body>


<div id="wrapper">


<div id="contentpad">

<div id="left">Left</div>

<div id="mid">Middle</div>

<div id="right">Right</div>

</div>


</div>


</body>
</html>

Link to comment
Share on other sites

Ok it helps, but i cant for the life of me get any padding on the left and right side.

 

I need a container thats 1010px wide and the columns should be like so: (including 10px margins).

 

10px 190px 10px 570px 10px 190px 10px.

 

Any ideas?

Link to comment
Share on other sites

I've looked at a few responsive grid frameworks. However, their samples and how they work dont exactly seem to allow me to do what i ideally need. I know they can allow me to do my 3 column layout easily... But will these still work while being nested within other divs. The above example was a very stripped down version.

Link to comment
Share on other sites

  • 9 years later...


Warning: odbc_connect(): SQL error: [Microsoft][ODBC Driver Manager] Data source name not found and no default driver specified, SQL state IM002 in SQLConnect in G:\USBWebserver v8.6\root\ecom_ele\ecom_ele\bTOb\admin\odbc_config.php on line 13
bool(false)
Fatal error: Call to undefined function odbc_connect_error() in G:\USBWebserver v8.6\root\ecom_ele\ecom_ele\bTOb\admin\odbc_config.php on line 17

Link to comment
Share on other sites

  • Barand locked this topic
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.