Hi G-Jim,
With the following, you shouldn't need breakpoints unless you really want them
for those boxes.
I also restructured your body and wrapper to be more responsive in my opinion.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffcc;
font-size: 100%;
color: #772B1B;
display: inline-block;
text-align: center;
}
#wrapper {
width: 80%;
height: 100%;
max-width: 1500px;
margin: 0 auto;
display: inline-block;
}
#banner {
background: #772B1B;
clear: both;
width: 100%;
text-align: center;
padding: 0%;
margin: 0;
border: 2px solid #000000;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 100%;
border-radius: 6px;
}
#home {
display: inline-block;
width: 100%;
}
nav {
background-color: #F5DA51;
clear: both;
width: 100%;
text-align: center;
padding: 1% 0%;
border: 2px solid #000000;
color: #772B1B;
display: inline-block;
overflow: hidden;
font-size: 100%;
font-family: helvetica, "Bookman Old Style", "Times New Roman", Roboto,
sans-serif;
border-radius: 6px;
}
#mainbody {
text-align: left;
float: none;
vertical-align: top;
clear: both;
display: inline-block;
width: 100%;
}
#maincontent_left40 {
background: #F5DA81;
float: left;
clear: right;
width: 100%;
max-width: 340px;
text-align: left;
padding: 2%;
margin: 1% auto;
border: 1px solid #660000;
border-top: 4px solid #772B1B;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 87.5%;
border-radius: 6px;
position: relative;
display: block;
}
#maincontent_right60 {
background: #F5DA81;
float: left;
clear: right;
width: 100%;
max-width: 555px;
text-align: left;
padding: 2%;
margin: 1% 3%;
border: 1px solid #660000;
border-top: 4px solid #772B1B;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 95%;
border-radius: 6px;
position: relative;
display: block;
}
#wyomerc_contact {
clear: both;
margin: 0 auto;
padding: 1% 0;
background: #FFFFCC;
width: 100%;
overflow: hidden;
font-family: "Bookman Old Style", "Times New Roman", Roboto, sans-serif;
font-size: 80%;
font-weight: bold;
color: #660000;
text-align: center;
border-radius: 6px;
display: inline-block;
}
#wyomerc_footer {
clear: both;
background: #FFFFCC;
width: 100%;
border-radius: 6px;
display: inline-block;
}
Try that css out. I think this is more of what you are looking for.
Remember to only use a float if you want to take an element OUT of the document
flow.
Also, I believe your @media query is set up wrong.
style=" @media ( min-width: 768px){ <br> <br> }"
Should be
style=" @media all and ( min-width: 768px){ clear:both;}"
But again, you shouldn't need this with the above css.
You will want to play with the max-widths to get the desired effect.
I placed in arbitrary numbers in for debugging purposes.
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
> On Dec 14, 2016, at 12:47 PM, GJim <jarne...@wyomerc.com> wrote:
>
> All,
>
> Not sure if this can be resolved in CSS or HTML - I'm asking in the CSS list
> first.
>
> On this page:
> www.wyomerc.com/index_test.html
>
> I want the right-hand block ('Essays') to drop below the left-hand block
> ('Reference') when the media width is less than 768px (an arbitrary number at
> this point), but stay to the right at greater screen sizes. My CSS is
> working,
> at least to the point of changing the size of the block (from 55% to 35%) and
> the float, but I'm flummoxed as to how to get the block to drop.
>
> Assistance greatly appreciated.
>
> G-Jim c):{-
>
>
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
