How to position elements correctly

[coder007]

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

https://www.xup.in/dl,12751796/float_2.png/

 

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

but have still problems to layout these two Layouts.

https://www.xup.in/dl,12751796/float_2.png/

 

Thanks you very much for your help.

 

[coder007]

Nobody an idea?

[Ingolme]

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>
</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.

[dsonesuk]

???????????

1) row1 one column

2) row2 three columns

3) row3 two columns

Using margins, float or display: block/inline-block