CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Dekker
John Dekker

Reputation: 9

CSS Div Postioning

The styles in the following code are working fine on large devices (Desktops and tablets). But on mobile devices most of the divs are overlapping because of the margin-top values.

I know this is not a propery way of designing website responsively. Could you please give me a solution? 

#welcome {
  background: yellow;
  background-size: 100% 100%;
  width: 100%;
  height: 600px;
}
#inquiry {
  margin-top: 600px;
  width: 100%;
  height: 500px;
  background: red);
}
#products {
  margin-top: 1100px; /*(margin-top of inquiry + height of inquiry) */
  width: 100%;
  height: 500px;
  background: green;
}
#footer {
  margin-top: 1600px; /* (margin-top of products + height of products) */
  width: 100%;
  height: 500px;
  background: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
  Welcome Message
</div>
<div id="Inquiry">
  Inquiry Form
</div>
<div id="products">
  Products
</div>
<div id="footer">
  footer
</div>

Upvotes: 0

Views: 75

Answers (5)

Asons
Asons

Reputation: 87191

Based on your comments, normal static/relative div elements are by default as wide as the screen and will stack themselves vertically after each other.

By setting position: relative on them, you can move them from that normal flow and if you set position: absolute you take them out from that normal flow and place them on an exact position/size using left, top, width and height properties.

Here is a sample showing that:

#welcome {
  background: yellow;
  height: 600px;
  position: relative;
  left: 50px;
}
#inquiry {
  height: 500px;
  background: #f99;
}
#products {
  height: 500px;
  background: #9f9;
}
#footer {
  height: 500px;
  background: #99f;
}
#extra {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background: #f9f;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
  Welcome Message, positioned relative, moved out of flow 50px to the left
</div>
<div id="inquiry">
  Inquiry Form
</div>
<div id="products">
  Products
</div>
<div id="footer">
  footer
</div>
<div id="extra">
  extra, positioned absolute
</div>

Upvotes: 0

Ben Edwards
Ben Edwards

Reputation: 168

You can either use percentages for width and height properties (a width of 80% will allways be 80% of the current size of the browser window, and thus your element will scale responsively when the window is resized).

However, I'd strongly recomend you learn to use media queries instead. Lets say you have a left navigation menu of class left-nav, that you'd like to occupy 20% of the page width, but to be hidden at page widths of 800px and less.

.left-nav{width:20%}

@media screen and (max-width 800;){
.left-nav{display:none}
}

It should hopefully be really easy for you to figure out how media queries work from this example - you specify a maximum and/or minimum page width or height at which to apply given rules. Should be fairly straight forward to make your page layout behave properly using these.

Upvotes: 0

Nathan
Nathan

Reputation: 920

Although it is better to use Mediaqueries, You can also use:

margin-top: 10vh;
height: 20vh;

this will place the div 10% of the screen height down, and will give it a height that is 20% of the screen size. The problem is that it is CSS3 so old browsers won't support it. (I think everything below android 4.0 won't support it. you have to test this though) The amount of people using outdated browser is getting less and less.

Upvotes: 1

Jan
Jan

Reputation: 1

Try with: 

position: absolute;
margin-top: 150px;
margin-left: 100px;

//inside of a box you can use padding-top......

Upvotes: 0

Denys A.
Denys A.

Reputation: 1

You can use margin-top: % instead of pixels. Or just use @media queries to control your margin on different screens. For example: @media (max-width: 991px) { #products{ margin-top: 100px; } }

Upvotes: 0

Related Questions