how do i allign my div containers using css


Tags: php,html,css

Problem :

how can i align my containers horizontally inside another container. also i want to center align them when the window is resized because every time i try it the containers just keep on popping somewhere i don't want them to please help me thank you. below is the code:

my index page

<html>
<head>
<title> Kwiktable </title>
<link rel="stylesheet" type="text/css" href="jssor.css">
</head>
<body>
<div class="headercontainer" style="z-index:1000;">
  <div class="header clearfix"> <span class="logo"><img src="img/kwiktable.png"><a href = "index.php">&nbsp <img src = "img/kwik.png"> </a></span>
    <input type="text" class="textbox" style="color:#888;" 
    value="Search" onfocus="inputFocus(this)" onblur="inputBlur(this)">
    <script>
        =function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
        }
    function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
        }
    </script>
    <div class="nav">
      <input type="checkbox" id="toggle">
      <label for="toggle" class="toggle" onclick=""></label>
      <ul class="menu">
        <li><a class="current" href="index.php">Home</a></li>
        <li><a href="aboutus.php">About Us</a></li>
        <li><a href="reserve.php">Reservations</a></li>
        <li><a href="login.php">Log in</a> </li>
      </ul>
    </div>
  </div>
</div>
<center>
<br>    <br>    <br>    <br>
<div style="margin:0 auto;width:100%;max-width:1050px;background-color:#E8E8E8;overflow:hidden; border: 1px solid #000000;">
<div class="container" style=" margin-left: 10px; width 100%; max-width: 450px; background-color:#E8E8E8;overflow:hidden;">
  <?php include 'content1.html';?>
  <?php include 'content.html'; ?>
</div>
<div class="container1" style="margin-right: 10px; margin-top: 10px; width 100%; max-width: 450px; background-color:#E8E8E8;overflow:hidden; "> </div>
<div  class="container2">
  <?php 
    echo "<br><h1>Kwiktable's Best</h1>";
    include 'best.php';
    ?>
  <br>      <br>      <br>      <br>
</div>
</center>
<?php include 'footer.php'; ?>
</body>
</html>

my css file:

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

html, body {
    height: 100%;
    background: #fff;
}

body, a {
    font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
    color: #3f3f3f
}

.textbox {
    margin-top: 25px;
    width: 500px;
    height: 30px;
    background-color: #FFEAEA;
    border: solid 1px #646464;
    border-radius: 5px;
    outline: none;
    padding: 2px 2px;
}

.textbox:hover {
    background-color: #F7C4C4;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear
}

.textbox:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.83);
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear
}

iframe {
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: solid 1px #000;
}

.headercontainer {
    opacity: 0.95;
    display: block;
    margin: 0 auto;
    margin: 0 auto;
    background-image: url(img/menubar.jpg);
    background-color: #D93625;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid #000;
    box-shadow: 0px 1px 1px #888888;
}

.headercontainer:after {
    content: '';
    display: block;
    clear: both
}

.footer {
    bottom: 0;
    margin: 0 auto;
    height: 60px;
    padding: 0 0;
    background: #bbbfbf;
    font-size: 12px;
    width: 100%;
    border-top: 1px solid #51c1f1
}
 @media only screen and (max-width:480px) {

.copyright { display: none }
}

body {
    -webkit-animation: bugfix infinite 1s;
    -webkit-font-smoothing: antialiased
}
 @-webkit-keyframes 
bugfix {  from {
 padding:0;
}

to { padding: 0; }
}

.header {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
}

#toggle, .toggle { display: none }

.menu>li {
    list-style: none;
    float: left
}

.clearfix:before, .clearfix:after {
    display: table;
    content: ""
}

.clearfix:after { clear: both }
 @media only screen and (max-width:768px) {

.textbox {
    width: auto;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.menu {
    display: none;
    opacity: 0;
    width: 100%;
    position: absolute;
    right: 0
}

.menu>li {
    display: block;
    width: 100%;
    margin: 0
}

.menu>li>a {
    display: block;
    width: 100%;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.toggle {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    margin-top: 8px
}

#toggle:checked~.menu {
    display: block;
    opacity: 1
}
}

.header {
    min-height: 80px;
    max-width: 1500px;
    height: 100%;
    padding: 0 20px;
    background: #D93625;
    color: #fff;
}

.header>.logo {
    float: left;
    padding: 10px 50px;
    font-style: italic;
    font-size: 28px;
    line-height: 50px
}

.nav {
    display: block;
    float: right;
    text-align: right
}

.nav, .menu, .menu>li, .menu>li>a { height: 100% }

.menu>li>a {
    display: block;
    padding: 20px 17px;
    text-decoration: none;
    font-weight: normal;
    font-size: 16px;
    line-height: 2.8;
    color: #fff;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear
}

.menu>li>a:hover, .menu>li>a:focus {
    background: #8B0000;
    border-radius: 10px;
    color: #fff;
    background-color: #8B0000;
    box-shadow: 1px 1px 1px 1px #3D0000 inset;
    border-bottom: solid 1px #FF9292;
    text-shadow: 0px 0px 10px #E6FF00;
}

.menu>li>a.current {
    color: #fff;
    font-weight: 900
}

.toggle { z-index: 2 }
 @media only screen and (max-width:820px) {

.textbox {
    width: auto;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.menu {
    background: #363636;
    border-top: 1px solid #fff;
}

.menu, .menu>li, .menu>li>a { height: auto }

.menu>li>a {
    padding: 15px 15px;
    text-align: center;
    background-color: #363636;
    border-bottom: 1px solid #fff;
}

.menu>li>a:hover, .menu>li>a:focus {
    background: #D70000;
    padding: 15px 15px 15px 25px;
}

.toggle:after {
    content: 'Menu';
    box-shadow: 0px 0px 5px 0px #3D0000 inset;
    text-shadow: 0px 0px 10px #E6FF00;
    display: block;
    width: 80px;
    margin: 0 0;
    margin-top: 25px;
    padding: 10px 0;
    background: #D70000;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.toggle:hover:after { background: #920000 }

h1 {
    margin: auto;
    width: 70%;
}

.container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.container1 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#toggle:checked+.toggle:after { content: 'Close' }
}

.share-icon {
    display: inline-block;
    float: left;
    margin: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    vertical-align: middle;
    background-image: url(img/share/share-icons.png)
}


Solution :

Looks like you're missing a closing </div> tag which is more than likely why it's jumping all over the page. Use a tool like this to help you: http://www.freeformatter.com/html-validator.html

Nice going with the responsive design, but you may want t focus more on your HTML and CSS.

<center> tags are a bad hack. You should be doing that with CSS. Additionally, your use of <br>s for spacing should also be done with CSS. Take a look into padding and margin.

If you wanted to <center> a div, the css alternative is something like this:

<div class="container">
    <div style="margin:0 auto; width: 800px;">This will be centered </div>
</div>

Just to start you out.

What happens here is the container div fills 100% as a standard div should. The child div (the one with the style tag) sets its top and bottom margin to 0, and its left and right margin to auto. The important part here is that the div also has a fixed width. So the div will take up 800px in this instance an any remaining space will automatically be distributed evenly by the margin.

You could Google this and get a better explanation I'm sure.


    CSS Howto..

    How to extend this navigation bar off the page?

    how to change text color hover

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How to display an image from a dropdown menu selection?

    How to spread three columns in CSS across a page equally

    How to maintain the background image until end of the page

    How to center vertically child elements inside div [duplicate]

    How to let css selector exclude an element?

    How to have a hidable paragraph in an HTML email template

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to center text inside div in this specific situation? [duplicate]

    How do I increase the width and font-size of my twitter feed widget?

    HTML/CSS/JS - How to change and image and text on click

    How to check css in unit test

    How do I get rid of the last tr td bottom border using css?

    How do I toggle CSS with jQuery?

    How can I align the checkboxes in a form when using table display with CSS?

    How to enable bootstrap 4 flex?

    How can I set css for a class in a class?

    CSS: How to select only the first non-adjacent sibling after the element

    How can I completely cancel a class when a CSS media style is used?

    how to use javascript if in IE but use css for all other browsers?

    How do I use a sprite background image to display once on an element (no-repeat)?

    How to get different style in nested element depending to depth level?

    Using bootstrap, how do you get columns to clear properly?

    IcoMoon App icon fonts are shown as 

    How to draw arrows in CSS [closed]

    How to customize twitter/bootstrap more deeply? [closed]

    How to set padding on the container?

    how to use text-indent only with element not ont it's :before Selector?