CODEWITHSUNDEEP
htmlcss
Wannabe
Wannabe

Reputation: 737

Can't position div below another div

I'm trying to make a website, with my basic knowledge, for my mother. But I've tried many things, but I can't get it to work the way I want it to

This is how it now looks:

enter image description here

And this is how I want it to be:

enter image description here

But somehow I can't get it to work. The div isn't positioning where I want it to position.

This is my source code: JsFiddle

It's about this part that doesn't position properly:

 <div class="wrapper_3">
    <div class="main_3">
        3
    </div>
 </div>

Thanks in advance for the help! I really can't get it to work.

Upvotes: 0

Views: 1795

Answers (3)

Shehroz Ahmed
Shehroz Ahmed

Reputation: 537

Here you go :) I edited your fiddle, Why are you using position:absolute; everywhere? There is no need of absolute positioning in your design.

* { 
  padding: 0; 
  margin: 0; 
}

html, body {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper_logo {
  margin-top: 10px;
  margin-left: 10px;
  width:20%;
  display: inline-block;
  position: absolute;
}

.wrapper_logo:after {
  padding-top: 45%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 10px;
    padding-left: 20px;
    font-size: 30px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: black;
    vertical-align: middle;
}

.wrapper_1 {
  width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
}

.wrapper_1:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
  clear: both;
}

.main_1 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_2 {
  width: 25%;
  margin-left:200px;
}

.wrapper_2:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_2 {

  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.wrapper_3 {
  width: 15%;
  float: left;
  display: inline-block;
  position: absolute;
}

.wrapper_3:after {
  padding-top: 56.10%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.main_3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 30px;
  background-color: deepskyblue;
  color: white;
}

.three {
  position: absolute; 
  background: green; 
  width: 400px; 
  top: 10px; 
  left: 50px;
}
<!DOCTYPE html>
		<div class="main">
    
		    <div class="wrapper_logo">
				<div class="main_logo">
					LOGO
				</div>
			</div>

        	<div class="wrapper_1">
				<div class="main_1">
					1
    			</div>
			</div>

			<div class="wrapper_2">
				<div class="main_2">
					2
    			</div>
			</div>

			<!-- <div class="wrapper_3">
				<div class="main_3">
					3
    			</div>
			</div> -->
		</div>

Upvotes: 1

Batman
Batman

Reputation: 480

it will be easier if you use bootstrap for your website.

html:

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="logo text-center">logo</div>
        </div>
        <div class="col-xs-offset-4 col-xs-3 box">2</div>
            <div class="col-xs-offset-4 col-xs-3 box">1</div>
    </div>

</div>

css:

.logo {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 15px;

}
.box {
    padding: 60px;
    background-color: red;
    margin-top: 30px;
}

http://jsfiddle.net/souraj/sxuqqqgd/

here you can see the code. you have to link the bootstrap.css file to work. just visit to getbootstrap.com and see how to link bootstrap.css in your code.add this code to your head section of the code. enter link description here

Upvotes: 1

sudo_dudo
sudo_dudo

Reputation: 581

Add float:left; to wrapper_1 and wrapper_2

after that, use position:relative; to position wrapper_2.

visit this link if you need more information about syntax. CSS Position Property Here is your new CSS.

.wrapper_1 {    width: 25%;
  display: inline-block;
  position: relative;
  margin-left: 21%;
  margin-top: 14%;
  clear: both;
    float:left;}


 .wrapper_2 {
      width: 25%;

      display: inline-block;
      position: absolute;
      margin-left: 16px;
      margin-top: 5%;
        float:left;
        position: relative;
        top: 50%;

    }

Upvotes: 1

Related Questions