I have unwanted space between elements when I use max - width %

[jools]

Hello all,

 

I am trying to resize an image, so that it fits when viewed on a screen with a resolution size of between 800 and 1023px. I would like the size of the image to change depending on the size of the screen - i.e. bigger when 1023 and smaller when 800. As such, I have tried to use the max-width: % command and the max-width: auto command hoping that the image will re-scale when I reduce the screen size but I have had no success.

 

A problem seems to be when I reduce the size of the window, my right element which has property float: left moves down beneath the left element when the screen is reduced in size instead of reducing in size itself.

 

I use the following code. I further specify img and p and have tried also changing their max width to a % but this has not proven successful.

#contentbox_left {/*three content boxes*/max-width: 70%;    margin: 0;    padding:  0;    border: 0;    float: left;    }

Can anybody tell me what I'm not doing right?

 

Many thanks for reading this post.

 

 

 

 

 

[davej]

I don't understand why you are using max-width rather than width -- and this is too vague to describe what you are doing.

 

If you can create a small HTML file which demonstrates your problem you could then post that file here.

[Jonathanks]

In your css #contentbox_left {/*three content boxes*/...}, would you place the three content boxes on the same page. I'd suggest you use .contentbox_left instead.

[jools]

Hello,

 

Sorry for the delay - more detail on the problem after some more head-scratching...

 

I have three columns of text and images and have them placed within three elements (#contentbox_left, #contentbox_middle, #contentbox_right). With respect to padding these elements are slightly different which is why I created three different elements and did not use the same one three times (actually, the one in the middle only differs with padding...).

#contentbox_left {/*three content boxes*/    max-width: 325px;    width: 100%;    margin: 0;    padding:  0;    float: left;    background-color: #096;    }    #contentbox_middle {    max-width: 325px;    width: 100%;    margin-right:13px;    margin-left:13px;    float: left;    background-color: #066;    }

Between the range of 800 and 1023 px. I want these elements to behave in a certain way; I want them to remain as three columns on the screen side by side (i.e. not be positioned below each other element). As a starting point I have sized the elements so that they fully occupy the screen when it is at the high end of the defined screen size giving them a width of 325px . Shown below:

 

 

However, when I minimize the screen size down to the 800px range, the element on the left drops down below the element on the right as shown.

 

 

What I would like to happen in this case is the elements just to reduce in size to fit onto the screen so that regardless of the size of the screen, there are still three column (elements) which have been scaled according to screen size.

 

At the moment I have these elements floating left, which explains why the left one drops below the right one when the screen gets smaller, but I am not aware of another method to get the three elements to position next to each other.

 

I am happy with the CSS commands only responding within certain ranges using:

@media only screen and (min-width : 800px) and (max-width : 1023px)

but it's within that range that I want the re-sizing to occur. I need some kind of command which specifies with max width in pixels but allows scaling below that. I tried using max width and also width = 100% but that doesn't seem to work.

 

Many thanks for reading.

 

Edited September 1, 2014 by jools

[dsonesuk]

Using max width with percent does not really do anything different than using width: 70%;, if using percentage value for each column and using a non percentage unit for padding and margins will result in columns + margins/padding becoming wider than the area they would occupy causing stacking when window size is reduced.Consider floating left column left, right column float right, and place middle column BELOW these without floating and either1) apply appropriate margins left and right larger than left/right columns.OR2) use overflow: auto; which will cause middle column to strech to the space available to it between left/right column automatically.

[jools]

Many thanks for your quick reply.

 

I tried these option quickly dsonesuk and option 1 worked to an extent but there seems to be a bit of overlap

 

 

Option 2 worked also to an extent but I still had a problem with the third element dropping down below the first.

 

However, I will play about with these variations and see if I can get something working and then post my results (if successful).

 

Many thanks

[dsonesuk]

Those 3 columns seem to be of fixed width and not fluid when using percentage widths, they remain same size compared with the small thumbnail images above them, the outer columns should be approx 32% wide.

 

It should be similar to this

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            body,html {margin:0; padding:0;}            #wrapper {overflow: hidden; margin: 10px; min-width:480px}            #slideshow {                display: block;            }            @media only screen and (min-width : 800px) and (max-width : 1024px){                #slideshow {                    display: none;                }            }            #slideshow {text-align: center;}            #slideshow img{                margin: 0.25%;                width: 13.78%;                height: 13.78%;            }            #contentbox_left, #contentbox_right, #contentbox_middle {/*margin-top: 10px; */}            #contentbox_left *, #contentbox_right *, #contentbox_middle * { margin-left:  10px;  margin-right:  10px;}            #contentbox_left, #contentbox_right{width:33%;}            #contentbox_left {                float: left;                background-color: #096;                margin-right: 10px;            }            #contentbox_right {                float:right;                background-color:  #066;                margin-left: 10px;            }            #contentbox_middle {                overflow: auto;                background-color: #0BF;            }        </style>    </head>    <body>        <div id="wrapper">            <div id="slideshow"><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/><img src="http://www.w3schools.com/css/klematis_small.jpg" width="296" height="221" alt="1cha_imgash"/>            </div>            <div id="contentbox_left"><h2>Left Column</h2><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, sed do eiusmod tempor incididunt consectetur adipisicing elit. Lorem ipsum dolor sit amet, ut enim ad minim veniam, eu fugiat nulla pariatur. Sunt in culpa qui officia deserunt in reprehenderit in voluptate.</p>                <p>Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, eu fugiat nulla pariatur.</p>                <p>Consectetur adipisicing elit, duis aute irure dolor ullamco laboris nisi. Cupidatat non proident, in reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, mollit anim id est laborum.</p></div>            <div id="contentbox_right"><h2>Right Column</h2><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, sed do eiusmod tempor incididunt consectetur adipisicing elit. Lorem ipsum dolor sit amet, ut enim ad minim veniam, eu fugiat nulla pariatur. Sunt in culpa qui officia deserunt in reprehenderit in voluptate.</p>                <p>Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, eu fugiat nulla pariatur.</p>                <p>Consectetur adipisicing elit, duis aute irure dolor ullamco laboris nisi. Cupidatat non proident, in reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, mollit anim id est laborum.</p></div>            <div id="contentbox_middle"><h2>Middle Column</h2><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, sed do eiusmod tempor incididunt consectetur adipisicing elit. Lorem ipsum dolor sit amet, ut enim ad minim veniam, eu fugiat nulla pariatur. Sunt in culpa qui officia deserunt in reprehenderit in voluptate.</p>                <p>Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, eu fugiat nulla pariatur.</p>                <p>Consectetur adipisicing elit, duis aute irure dolor ullamco laboris nisi. Cupidatat non proident, in reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, mollit anim id est laborum.</p></div>        </div>    </body></html>

Edited September 1, 2014 by dsonesuk