CODEWITHSUNDEEP
htmlcss
user8142103
user8142103

Reputation:

How do I position a div after the others?

So I have multiple divs. Like this:

<div id="LeftContent"></div>
<div id="RightContent"></div>

And so on. My goal is to create a centered div after all that. When I try to, I end up with the div being in the empty spaces between the 'left' and 'right' divs. An answer with some CSS code would be most appreciated.

HTML5:

  <!doctype html>
<html>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<head>




<meta charset="utf-8">
<title>OneClickLearn</title>
</head>

<body>


<aside>

    <br>
    <nav>
      <ul>
        <li><a href="#nowhere" title="Home">Home</a></li>
        <hr>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Learn HTML</a></li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Learn CSS</a></li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Learn the Basics of Web Design</a></li>
        <hr class="nav">
        <li><a href="#nowhere" class="denied" title="Pellentesque fermentum dolor">Learn PHP</a></li>
        <li><a href="#nowhere" class="denied" title="Pellentesque fermentum dolor">Learn JAVASCRIPT</a></li>
      </ul>
    </nav>
  </aside>
  <a id="nav-toggle" href="#" class="position"><span></span></a>
<main>
  <header>
    <div href="#" class="container">
      <h1 class="title">OneClickLearn</h1>
    </div>
  </header>
</main>


<div class="header">
    <div class="content">
        <h1 class="large">Welcome To OneClickLearn</h1>
        <hr class="hr">
        <h2>A website for web developers everywhere</h2>
        </div>
    </div>



<div class="left">
    <h1>What you can do with us</h1>
    <h3>OneClickLearn offers several web design courses, as well as tools like <a href="#">Cascading Style Sheet</a> libraries, and special colors to use for your website! Unlike some other coding websites, OneClickLearn is absolutely free!</h3>
    <a class="abutton"><button>Learn More</button></a>
    </div>

<div>  
<div class="right">
    <h1>CSS Libraries</h1>
    <h3>What's a <a href="#">CSS Library</a>? Simple. This tool is made for web developers who are advanced in website functionality, but maybe not so great in what we would call, 'the pretties'. A CSS library is all the tools in design you need-- waiting for you on the web.</h3>
    <a class="abutton"><button>Learn More</button></a>
    <a class="abutton"><button class="buttonop">Get Ocelot.css</button></a>
</div>

    </div>

<div class="left">
    <h1>Courses</h1>
    <h3>All our courses (so far!) are based off of web design. With these courses, you learn the basics of HTML5, CSS3, and more languages coming soon. Also, you can learn our Cascading Style Sheet libraries' functions. If you have any reccomendations, just email us down below</h3>
    <a class="abutton"><button>Email Us</button></a>
    <a class="abutton"><button class="buttonop">Learn More</button></a>
    </div>


<div class="div">
    <h1>Having trouble with your website?</h1>
    <h3>We'll see what we can do.</h3>
    <a href="mailto:[email protected]"><button class="abutton">Contact Us</button></a>
    </div>    

</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="js/nav.js"></script>
</html>

CSS:

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

.div {
        clear: both;
        margin: 0 auto;
        height: 100px;
        width: 600px;
        text-align: center;
    }

    .greyback {
        background-color: #4B4949;
    }

    .nav {
        background-color: #bdc3c7;
    }

    .denied {
        color: #bdc3c7;
    }

    .denied:hover {
        cursor: not-allowed;
    }

    body {
        size: 100%;
        display: cover;
        margin: 0;
        padding: 0;
    }

    p a {
        color: #27ae60;
        text-decoration: none;
    }

    p a:hover {
        color: #27ae60;
        text-decoration: underline;
        cursor: pointer;
    }

    .header {
        color: white;
        width: 100%;
        height: 300px;
        background-color: #2980b9;
    }

    .content {
        margin-top: 70px;
        padding-top: 60px;
        text-align: center;
    }

    .large {
        font-size: 40px;
    }

    .hr {
        width: 100px;
    }

    .left {
        margin: 20px;
        float: left;
        height: auto;
        width: 50%;
        color: #4B4949;
    }

    .right {
        margin: 20px;
        float: right;
        height: auto;
        width: 50%;
        color: #4B4949;
    }

    a {
        color: #2AABAD;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .side {
        margin: 20px;
    }

    .img {
        display: inline-block;
    }

    button {
        background-color: #2980b9;
        border: none;
        border-radius: 5PX;
        height: 40px;
        width: auto;
        color: white;
    }

    button:hover {
        background-color: #3498db;
        cursor: pointer;
    }

    .abutton {
        color: none;
        text-decoration: none;
    }

    .buttonop {
        background-color: #3498db;
        border: none;
        border-radius: 5PX;
        height: 40px;
        width: auto;
        color: white;
    }

    .buttonop:hover {
        background-color: #2980b9;
        cursor: pointer;
    }

    .main {
        width: 100%;
        text-align: center;
    }

    .main-content {
        display: inline-block;
    }

P.S. I am using float:left; and float:right; for the left and right divs :)

Thanks :) (If I need any elaboration please let me know)

Upvotes: 0

Views: 81

Answers (3)

Edison D&#39;souza
Edison D&#39;souza

Reputation: 4640

What I understand from your question is that you need a centered div. You can do this to achieve centered div.

HTML:

<div class="centered-div">
  Some Content
</div>

CSS:

.centered-div {
  width: 400px;
  min-height: 400px;
  margin: 0 auto;
  clear: both;
}

I hope that helps :)

Upvotes: 0

Belder
Belder

Reputation: 808

Yeah, not totally sure what you want, but maybe something like this?

#CenteredContent {
  clear: both;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  background-color: red;
}

Upvotes: 1

Will W.
Will W.

Reputation: 46

I'm not 100% clear on what you are asking, but you could try something like the following:

Html

<div id="LeftContent"></div>
<div id="RightContent"></div>
<div id="CentredDiv"></div>

CSS

div {
    border: 1px solid #f0f;
    height: 50px;
    box-sizing: border-box;
    width: 400px;
}
#LeftContent,
#RightContent {
    float: left;
}
#CentredDiv {
    width: 800px;
    clear: left;
}

Upvotes: 2

Related Questions