Skip to main content
M
Mobos
Known Participant
August 5, 2018
Answered

clear div

  • August 5, 2018
  • 3 replies
  • 792 views

Hi forum,

It's been a while since I started a new site with dreamweaver, but I see that the new html page doesn't come with "standard" css, etc.

Anyhow ..... I copied the boilerplate.css and some html from other sites and it seems to work fine.

Except ......

The div in which the two buttons with the logo's are (Strongbeads.com and blog Devi) are under each other in the mobile phone version, but still in the tablet and computer version and I want them there to be next to each other. Whatever I try, nothing seems to help .... either they are under or next to each other in all three versions.

www.beadsandcotton.com

Dreamweaver version 4.6.0.384 uitgebracht op 09-07-2018

    Correct answer osgood_

    Add

    .doorlinken {

    display: flex;

    }

    to the desktop media query as below:

    @media only screen and (min-width: 769px) {

    .gridContainer {

        width: 88.5%;

        max-width: 1000px;

        padding-left: 0.75%;

        padding-right: 0.75%;

        margin: auto;

        clear: none;

        float: none;

        margin-left: auto;

    }

    .Inhoud {

        width: 60%;

        margin-left: 20%;

    }

    .doorlinken {

        width: 70%;

        margin-left: 15%;

       

    }

    .Twee {

        clear: none;

        width: 40%;

        margin-left: 10%;

    }

    .doorlinken {

    display: flex;

    }

    }

    3 replies

    M
    MobosAuthor
    Known Participant
    August 6, 2018

    Hi Nancy and Osgood, thanks for your rapid reply!!

    Since this is one simple page I think it's a good moment to try the 'bootstrap-thing' ..... I see that it comes with an example, so I'll give it a go!

    O
    osgood_
    Legend
    August 6, 2018

    Mobos  wrote

    Hi Nancy and Osgood, thanks for your rapid reply!!

    Since this is one simple page I think it's a good moment to try the 'bootstrap-thing' ..... I see that it comes with an example, so I'll give it a go!

    I would have a go at coding the page yourself, Bootstrap is way overkill for a simple single page, which is mostly just predominantly consisting of images and a few lines of text.

    M
    MobosAuthor
    Known Participant
    August 6, 2018

    Thanks Osgood, that's true! I'll try it with your code and let you know ....

    O
    osgood_Correct answer
    Legend
    August 5, 2018

    Add

    .doorlinken {

    display: flex;

    }

    to the desktop media query as below:

    @media only screen and (min-width: 769px) {

    .gridContainer {

        width: 88.5%;

        max-width: 1000px;

        padding-left: 0.75%;

        padding-right: 0.75%;

        margin: auto;

        clear: none;

        float: none;

        margin-left: auto;

    }

    .Inhoud {

        width: 60%;

        margin-left: 20%;

    }

    .doorlinken {

        width: 70%;

        margin-left: 15%;

       

    }

    .Twee {

        clear: none;

        width: 40%;

        margin-left: 10%;

    }

    .doorlinken {

    display: flex;

    }

    }

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 5, 2018

    Fluid Grid Layouts were removed from Dreamweaver quite  a while ago.  They have been replaced with Bootstrap's responsive framework.  My advice is don't use Fluid Grids for current projects.  It's not good enough for all the devices we have to support now. 

    The current Bootstrap 4 uses Flexbox layouts instead of floats and clearing.   Below is a quick example of 2 images side-by-side in Bootstrap version 4.

    Copy & paste entire code into a new, blank document and saveAs test.html.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 4 Starter</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Bootstrap 4 CSS-->

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <style>

    body {height: 100vh;}

    .flex-grow {flex: 1 0 auto;}

    </style>

    </head>

    <body class="d-flex flex-column">

    <nav class="navbar bg-dark text-white">Navigation goes here</nav>

    <main class="container flex-grow">

    <div class="row">

    <div class="col">

    <h1 class="p-1">Hello World!</h1>

    <h2 class="text-danger">Welcome to Bootstrap 4</h2>

    </div>

    </div>

    <div class="row">

    <div class="col">

    <img class="img-fluid" src="https://placeimg.com/500/500/nature" alt="placeholder">

    </div>

    <div class="col">

    <img class="img-fluid" src="https://placeimg.com/500/500/arch" alt="placeholder">

    </div>

    </div>

    </main>

    <footer class="bg-dark text-warning text-center">

    <p class="p-2">Footer goes here</p>

    </footer>

    <!--jQuery Core-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Popper JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <!--Bootstrap 4 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices