CODEWITHSUNDEEP
htmlcss
Caleb
Caleb

Reputation: 621

Displaying two sections that are different sizes side by side html

Here is the html coding:

<div>        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

I want to display to html sections side by side. When I do this it works:

div {float: left;}
div section {width: 50%; float: left;}

but when i try to specify each one as a separate size like this it doesnt:

div {
    float: left;
}
section .aboutus{
    float: left;
    width: 80%;
}
section .tripinfo{
    float: left;
    width: 20%
}

As you can see. In the first example i make both section 50 percent in the same code block. However as soon as i specify the size of each on in different classes it screws up. So if any of you could help me out that would be great.

Upvotes: 1

Views: 2780

Answers (4)

Ajay Gaur
Ajay Gaur

Reputation: 5270

Use display: flex instead using float, it will be a lot easier and less lines of code.

You html and css should be :

.flex {
  display: flex;
}

.aboutus {
  width: 80%;
  background: grey;
}

tripinfo {
  width: 20%;
}
<div class="flex">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

Seeing some answers with nice suggestions, but nobody has really pointed out what's actually wrong with your example.

  1. You don't need the div {float: left;}. It's applying to every single div on the page and causing some funky behavior.

  2. A space in a CSS selector indicates descendant, therefore the selector section .class is applying to any .class that is a descendant of a section. If you want it to apply to elements that are both section and .class, remove the space, like so: section.class

  3. Floats require clears. After each level of floated elements, you need to include a clear: both; to ensure that elements afterwards will still display properly. This is easier achieved by doing a ::after pseudo-element, so you don't have to actually put another element on the page to clear.

An updated example:

div.float-container::after {
    clear: both;
}

section.aboutus{
    float: left;
    width: 80%;
}
section.tripinfo{
    float: left;
    width: 20%
}
<div class="float-container">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
    </section>
</div>

display: flex makes things easier in almost all cases, but it isn't always the answer. I truly feel that sometimes a float is just a quicker and more concise approach to achieving a simple result.

Upvotes: 0

user8507674
user8507674

Reputation:

add this property to div element

display:inline;

if it does not work then remove float:left from div and add float:left to first section and display:inline to both section

Upvotes: 0

Chris Barr
Chris Barr

Reputation: 34012

Try this out using Flexbox instead of floats.

#container{
  display: flex;
  border: 1px solid #333;
}

#container section {
  padding: 10px;
}

.aboutus{
  background: #CCC;
  width: 80%;
}

.tripinfo {
  background: #DDD;
  width: 20%;
}
<div id="container">        
    <section class="aboutus">
        <div>Some content 1</div>
        <div>Some more 1</div>
    </section>

    <section class="tripinfo">
        <div>Some content 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
        <div>Some more 2</div>
    </section>
</div>

Upvotes: 2

Related Questions