CODEWITHSUNDEEP
htmlcssresponsive-design
Nikolay Stoimenov
Nikolay Stoimenov

Reputation: 27

responsive margin between divs

I want to add a margin between 2 divs, but for some reason when I do that the 2nd div goes under the first one.

<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;">
  <p> </p>
  <div style="width: 50%; height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width: 50%; height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>

Here is the example with margins: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=3

And this is without margins: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=4

Also I do not understand why the whole content in the main/top div is not displayed inside it. It looks like it is empty. I want it to be as a background of the 2 divs inside it.

Thanks in advance for all the help.

Upvotes: 1

Views: 352

Answers (5)

Marcus
Marcus

Reputation: 5143

As people have stated, the problem comes from having width 50% on the elements, and margin on top of that, which makes 50% + 50% + 5px + 5px > 100%, making it impossible to show them next to each other.

An easier way to make similar layout might be by using flexbox-layouts (for ex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/) which are really good for having elements next to each other with dynamic gutters (space between elements in layout grid).

Upvotes: 0

Eugene Kapustin
Eugene Kapustin

Reputation: 166

Both divs have 50% width and some margin and padding. Make calculation, which would substract padding and margin. For example:

width: calc(50% - 20px);
height: 100%;
float: left;
border-radius: 5px;
color: white;
background-color: rgba(220, 220, 220, 0.5);
padding: 5px;
margin: 5px;

В общем, тебе надо вычесть из 50% то, что ты насчитал в пикселях для margin и padding 5 px с каждой стороны = 10px, ну и ещё для margin - получаем надо отнять 20px - вот и пишем то, что в width.

This was translated with deepl.com

In general, you need to subtract from 50% what you counted in pixels for margin and padding 5 px on each side = 10px, and also for margin - we need to take away 20px - that's what we write in width.

Upvotes: 0

Jazzzzzz
Jazzzzzz

Reputation: 1633

You can follow below template both container you can set to 49% and one to float left and another to float right.

have a look to below code snippet.

<div style="width: 100%; background-color: yellow; height: 100%">
	<div style="float:left; width: 49%; background-color: red;">leftside</div>
	<div style="float:right; width: 49%; background-color: green;">rightside</div>
</div>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You need to remove margin from 50% width and box-sizing: border-box; for adding padding into width 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;">
  <p> </p>
  <div style="width: calc(50% - 10px); height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width: calc(50% - 10px); height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>

Upvotes: 0

Pete
Pete

Reputation: 58432

Your divs are one below the other as you have set a width of 50% for each div. As you have not used box sizing, your padding is added to this and then on top of that, you margin is then added so the width off your divs is 100% + 40px when all padding and margin is taken into account.

Instead of floating your divs, I would use flex on the container and it will make the divs stay on the same row (even if they are too wide, it will re-calculate the width to fit). It also gives you the added bonus of equal heights for the child divs and you don't need to worry about clearing your floats (thus fixing the issue with the parent).

Below I have removed the height and float from the inline styles and just added flex - the box sizing is optional, I just like to add it so you have more consistent behaviour between browsers when you add padding and set a width.

* {
  box-sizing: border-box;  /* add this so padding is included in width */
}

.container {
  display:flex;   /* add this to your container instead of using floats, this will force both divs to be in the same row */
}
<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;" class="container">
  <p> </p>
  <div style="width:50%; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width:50%; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>

Ps you should really use a stylesheet and not inline styles as it is a lot more maintainable and can cut down on your bloat quite a bit with re-usable classes

Upvotes: 1

Related Questions