Nesting divs but its not working?

Question

My div should contain two more divs inside (in-left and in-right), but in-right isn't working. How am I supposed to align it with in-left?

 #left { position: absolute; top: 76%; left: 20%; color: black; border: 2px solid black; border-radius: 15px 15px; padding-left: 15px; padding-right: 15px; font-size: 1em; text-align: center; background-image: url("pink.jpg"); height: 1000px; width: 800px; background-size: 900px 1000px; border: 1px solid black; background-repeat: no-repeat; box-shadow: 7px 7px 18px white; } #in-left { top: 87%; left: 22%; color: black; font-size: 1.5em; text-align: left; height: 650px; width: 400px; font-family: AR CENA; border-right: 1px solid white; } #in-right { top: 87%; left: 50%; color: black; font-size: 1.5em; text-align: right; height: 650px; width: 400px; font-family: AR CENA; } 

 <div id="left"><br> <center> <img src="acoe.jpg" alt="it's me" height="200" width="250"><img src="jer.jpg" alt="it's me" height="200" width="250"><img src="ako ulit.jpg" alt="it's me" height="200" width="250"></center> <div id="in-left"> <center> <h2> Hobbies </h2> </center> <ul> <u><b><li>Biking &#128693;</li></u></b> I bike around the subdivision every other day, alone and sometimes with my friends. I really enjoy the solitude and the way the air hits my hair, and I can proudly say that biking is my relaxation technique. <u><b><li>&#128214; Reading books and short stories &#128214;</li></u></b> I usually spend my time indoors, and reading has been a big help for me to ease my boredom. I enjoy the horror genre because of the feeling of thrill and excitement it gives me. Reddit: <a href="https://www.reddit.com/r/nosleep"><img src="reddit.png" height="25" width="25"></a> <u><b><li>&#128253; Watching movies &#127909;</li></u></b> <u><b><li>&#127911; Listening to music &#127926;</li></u></b> <u><b><li>Playing Videogames &#127918;</li></u></b> <u><b><li>&#127828; Eating &#127859;</li></u></b> </ul> </div> <div id="in-right"> <center> <h2> Interests: </center> </h2> </div> </div> 

Answer 1

use the float property of CSS. thanks

float : right;

Answer 2

Using flexbox will help you to achieve a solution easily. Check the snippet.

 div { border: 1px solid #ddd; padding: 10px; } .container { display: flex; } .in-left, .in-right { flex-grow: 1; } 

 <div class="container"> <div class="in-left"> Left </div> <div class="in-right"> Right </div> </div> 

Answer 3

There are a number of options that allow you to achieve what you're looking for here, but before I start listing them, a quick piece of advice when it comes to HTML and CSS: "The more you try to do, the more difficult it will become, try to look for the simplest solution".

With that in mind, let's look for a few simple solutions which let you achieve what you're looking for.

Option 1: Float

float is a brilliant property which allows you to align div elements within their parent container. It can work really well, however you need to be careful because (as the MDN documentation states):

...the element is taken from the normal flow of the web page...

What this means is that your parent container won't be sized to contain your div anymore. To fix this, you can use the clear property on the parent's ::after pseudo-element, which will force it to resize correctly.

 .parent { background: red; color: white; } .parent::after { content: ""; display: block; clear: both; } .left { float: left; background: blue; padding: 10px; } .right { float: right; background: green; padding: 10px; } 

 <div class="parent"> <div class="left"> My first div </div> <div class="right"> My second div </div> </div> 

Option 2: Inline Blocks

The next option takes advantage of the display property which allows you to configure how the Browser renders the element. Specifically, it allows you to configure the rendering box used by the Browser. By default a <span> element uses the inline display mode, while a div uses the block display mode. These correspond to (roughly) horizontal and vertical layout ordering as you can see in the following example:

 <div> <span>First</span> <span>Second</span> </div> <div> <span>Third</span> <span>Fourth</span> </div> 

What display: inline-block allows us to do is instruct the browser to render the blocks as normal, but arrange them horizontally as though they were part of the normal text flow. This works really well and is much better supported by older browsers than Option 3 (but not as well as Option 1 ).

 .parent > div { display: inline-block; } .parent { background: red; color: white; } .first { background: blue; padding: 10px; } .second { background: green; padding: 10px; } 

 <div class="parent"> <div class="first">First</div> <div class="second">Second</div> </div> 

Option 3: Flexbox

The coolest option, albeit the newest and therefore least supported by older browsers, is using the new flexbox layout mode. It's currently still in draft state, but a lot of modern browsers support it already .

Flexbox lets you do the same kind of thing as Option 2 but with much better control over how things get arranged, the spacing between them, how they flow onto other lines and so on. There's a lot that can be covered and I'm not going to do that all here, but the part that applies to you is this:

 .parent { display: flex; flex-direction: horizontal; justify-content: space-between; background: red; color: white; } .first { padding: 10px; background: blue; } .second { padding: 10px; background: green; } 

 <div class="parent"> <div class="first">First</div> <div class="second">Second</div> </div> 

As this is a school project, my suggestion is that you spend some time reading up on (and experimenting with) the various options here and getting a feel for what they do. Which one you end up using is a lot less important than learning how to use them in the first place. Best of luck with it.

Answer 4

I have updated your code so it will look more cleaner. I have also created a class inlineblock to the CSS and added to both div elements inside the #left parent element. In your HTML code there are syntax errors like in closing tags .

Here is the link I have created for you https://jsfiddle.net/beljems/fyyqvm1t/13/ .

Hope this will help you :)

Answer 5

Just try to use "float: left"

Here u have tutorial for using this CLICK

If u want to delete the "float" on rest space of site u need to use "clear: both"