CODEWITHSUNDEEP
htmlcss
Simon Dean
Simon Dean

Reputation: 237

CSS float rules and responsive - Fiddle Included

ATM I am developing a site and focusing on mobile view to start with:

On my second grid div I having issues ensuing the image appears opposite to the container above, if I float the image right, when I go passed 350 pixels viewport width all of the children elements start shifting in relation to the left hand UL which is not what I want.

Essentially I want each alternating grid divs list and images to be alternating positions but I would like my price and buttons to stay central, just like the first container.

Apologies if unclear, describing the problem is not strong point.

All markup and CSS in fiddle.

https://jsfiddle.net/Evilmop44/axpfp1oq/28/

HTML

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="manifest" href="site.webmanifest">
    <link rel="apple-touch-icon" href="icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/mobile.css">
</head>
<body>

<!-- Add your site or application content here -->
<div id="carSelector">
    <p class = "companyBlurb"> <strong>Tees Used Motors </strong> offer a small but quality range of used vehicles across all price ranges.<br>
        You can buy with confidence as all of our vehicles come with: <br>
        <strong>12 Months MOT<br>
        6 Months RAC Warranty<br>
        HPI Check<br></strong>
        Part Ex considered and vehicle delivery available. <br>
    </p>
    <p class = "clickDescription"> Click here to see our the best vehicles in our range.</p>
    <div id="carSelectModule">
    <select name="cars">
        <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <select name="price">
        <option value="defaultPrice" selected = "selected">Price</option>
        <option value="lessThan1000">Less than £1,000</option>
        <option value="2000to3000">£1,000 to £2,000</option>
        <option value="2000to3000">£2,000 to £3,000</option>
        <option value="moreThan4000">More than £4,000</option>
    </select>
    </div>
</div>
<div id="gridAds">
    <div>
        <h1 class="carTitle">Vauxhall Astra 1.4 i Turbo 16v SRi Nav (s/s) 5dr</h1>
        <div class = "addBox1"> <img class="carAdImg" src="img/car.jpg"/></div>
            <ul class = carSpecListR>
                <li>Up To 62.8MPG</li>
                <li>Apple Car Play</li>
                <li>10,553 miles from new</li>
                <li>Automatic</li>
                <li>148bhp</li>
                <li>Petrol</li>
            </ul>
        <p class = "carPrice">Only £4,299</p>
        <button type="button" class="adButtonleft">View Vehicle</button>
    </div>
    <div>
        <h1 class="carTitle">Vauxhall Astra 1.4 i Turbo 16v SRi Nav (s/s) 5dr</h1>
            <ul class = carSpecListL>
                <li>Up To 62.8MPG</li>
                <li>Apple Car Play</li>
                <li>10,553 miles from new</li>
                <li>Automatic</li>
                <li>148bhp</li>
                <li>Petrol</li>
            </ul>
        <div class = "addBox2">
            <img class="carAdImgRight" src="img/car.jpg"/>
        </div>
        <p class = "carPrice">Only £4,299</p>
        <button type="button" class="adButtonleft">View Vehicle</button>
    </div>
    <div>
        <h1 class="carTitle">I am car</h1>
        <div class="addBox1">Advert Images</div>
        <div class="addBox1">Text Content</div>
        <button type="button" class="adButtonleft">View Vehicle</button>
    </div>
    <div>
        <h1 class="carTitle">I am car</h1>
        <div class="addBox1">Advert Images</div>
        <div class="addBox1">Text Content</div>
        <button type="button" class="adButtonright">View Vehicle</button>
    </div>
</div>


<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
    window.ga = function () {
        ga.q.push(arguments)
    };
    ga.q = [];
    ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>

CSS

   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#gridAds {
    grid-template-columns: 1fr;
    grid-gap: 0.5em;
    display: grid;
}

#gridAds > div {
    background: #d4d4d4;
    padding: 1em;
    box-sizing: border-box;
    border: 2px solid white
}

#gridAds > div:nth-child(odd){
    background: #f3f4f6;
}

#carSelector {
    width: 100%;
    background-color: #0060a7;
    height: auto;
    text-align: center;
}

#carSelectModule {
    position: relative;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;

}

.adRightBox {
    width: auto;
}

.addBox1 {
    display: inline-block;
    width: 48%;
    margin: 0em auto;
    height: auto;
    min-width: 48%;
}

.addBox2 {
    display: inline;
    width: 48%;
    margin: 0em auto;
    height: auto;
    min-width: 48%;
    float: right;
}

.adButtonright {
     background-color: rgba(173, 216, 230, 0.25);
     border-color: rgba(0, 96, 167, 0.35);
     border-radius:0.2em;
     padding: 0.4em;
     position: relative;
     display: block;
     font-size: 1em;
     margin: 0em auto;
     cursor: pointer;
 }

.adButtonright:hover {
    background-color: lightblue;
    box-shadow: #cccccc;
}

.adButtonleft {
    background-color: rgba(173, 216, 230, 0.25);
    border-color: rgba(0, 96, 167, 0.35);
    border-radius:5px;
    padding: 0.4em;
    display: block;
    font-size: 1em;
    margin: 0 auto;
    cursor: pointer;
}

.adButtonleft:hover {
    background-color: lightblue;
}

.companyBlurb {
    border: 0px; color: #f3f4f6;
    padding: 2em;
    box-sizing: border-box;
    max-width: 70%;
    font-size: 0.7em;
    line-height: 1.6;
}

.carTitle{
    text-align: left;
    font-size: 20px;
}

.carAdImg{
    display: inline-block;
    margin: auto;
    max-width: 100%;
    float:right;
}

.carAdImgRight{
    display: inline-block;
    margin: auto;
    max-width: 100%;
    float:right;
}

.carSpecListR {
     font-size: 0.7em;
     list-style: none;
     display: inline-block;
     float: right;
     line-height: 1.2;
     vertical-align: middle;
 }

.carSpecListL {
    font-size: 0.7em;
    list-style: none;
    position: relative;
    display: inline-block;
    padding-left: 0.2em;
    line-height: 1.2;
    margin-right: 2em;
    vertical-align: middle;
}

.carPrice {
    font-size: 1em;
    font-style: oblique;
    font-weight: bold;
    display:block;
    padding: 0.5em;
}

.clickDescription {
    border: 0px; color: #f3f4f6;
    padding: 0.5em;
    box-sizing: border-box;
    max-width: fit-content;
    line-height: 1.6;
    font-size: 1em;
    background-color: #f3f4f6;
    color: #0060a7;
}

p {
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    padding: 1%;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Thanks

Upvotes: 0

Views: 155

Answers (1)

SpiRT
SpiRT

Reputation: 692

https://jsfiddle.net/axpfp1oq/24/

.carPrice clear:both to make floats more predictable

.carSpecListR - remove default css margin and padding and add max width to the block to control floats

do the same for carSpecListL

.carSpecListR {
     font-size: 0.7em;
     list-style: none;
     display: inline-block;
     float: right;
     line-height: 1.2;
     vertical-align: middle;
     margin:0;
     padding:0;
     max-width:50%;
 }

.carPrice {
    font-size: 1em;
    font-style: oblique;
    font-weight: bold;
    display:block;
    padding: 0.5em;
    clear: both;
}

Upvotes: 1

Related Questions