All geek questions in one place

Problems placing HTML <div> using css

Here is the site in question. http://www.splintercomm.net I need divs to be placed next to each other, staying at a horizontal distance from each other. In short, I do not want them to be folded. I want them next.

body { background-image:url('wild_oliva.png'); } div.container { overflow: hidden; } div.end { border-style:solid; border-width:1px; background-image:url(stressed_linen.jpg); border-radius: 15px 15px 15px 15px; margin-bottom:auto } div#body { border-style:solid; border-width:1px; background-image:url(stressed_linen.jpg); border-radius: 15px 15px 15px 15px; margin-left:20%; overflow: hidden; width:80%; } div#sidebar { border-style:solid; border-width:1px; background-image:url(stressed_linen.jpg); border-radius: 15px 15px 15px 15px; float:left; width:18%; float:left; }
+4
source share
3 answers

you can make divs inline using this property:

 display:inline-block;

Note 1: You have an error in the doctype declaration

 <doctype html>

Must be

 <!doctype html>

Note 2: I see only one div in your sample code.

+1
source

I'm not quite sure what doesn’t work for you here, as I can see that the blocks are aligned side by side in Firefox, Chrome and Safari. Is this a problem only in IE7?

In any case, I would just float the div body to the left. Replace the body of the css div # as follows:

 div#body { float: left; margin-left: 1%; border-style:solid; border-width:1px; background-image:url(stressed_linen.jpg); border-radius: 15px 15px 15px 15px; overflow: hidden; width:80%; }

Note that the left margin should be less than 2% of the width minus all borders (4px), or the div body will be too wide and flow under the sidebar.

Another option is to put the body of the div # to the right and just lower the left margin:

 div#body { float: right; border-style:solid; border-width:1px; background-image:url(stressed_linen.jpg); border-radius: 15px 15px 15px 15px; overflow: hidden; width:80%; }

Basically, if you want everything to be lined up on one line, the total width of the margins, borders, indents and areas of the window should be less than or equal to 100% of the width of the browser (window).

18% (sidebar width) + 80% (body width) + 2px (side borders) + 2px (body borders)

= 98% + 4px, which is less than 100% at maximum browser width.

+1
source

Although I'm not sure I understood the question, remove the margin:20%; from div#body

0
source

Source: https://habr.com/ru/post/1442427/

More articles:


All Articles