Jump to content

How to position elements correctly


Recommended Posts

how can I make these Layouts only using CSS?
The code should run on IE 11 and preferably in IE10.



I've already looked at the CSS Tutorial https://www.w3schools.com/css/default.asp

but have still problems to layout these two Layouts.



Thanks you very much for your help.


Link to comment
Share on other sites

That can be done by setting the right widths, floating the elements left or right and making use of box model properties. My guess is that nobody's stepped up to do it because the layout requires writing a considerable amount of code.

Your first layout has three rows. The first row has just one item, the second row has three and the third row has two. Each of the rows can be built with a structure like this:

<div class="row">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>

I would advise that you use class names that better describe the content within the elements, but since I don't know anything about your website I have to go with something generic like "row" and 'item"

In your CSS, you would set the width of the items in the row to the percentage they should occupy. Since this example row has three items, they should be 33.33% wide.

.item {
  float: left;
  width: 33.33%;

Finally, since elements with the "float" property aren't used to calculate the height of the parent element by default, we use this small piece of code to force the parent to wrap around the children. It creates a pseudo-element that forces itself right below all the child elements and the parent element will wrap around it.

.row::after {
  content: "";
  display: table;
  clear: both;

That's the most basic form of what's referred to as a grid layout. It's more complicated, but if you want gaps between the elements you need to add percentage margins and make sure that the sum of all margins and widths do not exceed 100%. It's also more complicated if you have an unknown amount of elements and you want to fit them into several rows. There are a whole lot of extra things you can do to make the optimal layout for each situation and I don't have the time to write an essay about it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...