CODEWITHSUNDEEP
htmlcss
Milica P
Milica P

Reputation: 37

Having trouble aligning a list and a video horizontally

I'm making a website for my A-Level Media coursework, and I'm having some trouble getting the character list and the video to line up horizontonally on the page, like this. (Also, the video I'm using is just a placeholder for now)

I've tried using different versions of inline: (such in :block; , ;grid;,etc) in order to make the two elements line up, although the cloest I've gotten is somehow lining up my elements diagonially. I've used the inline: CSS on the bottom of the page legal stuff (not shown in the code) and it worked to help line it up, although I did use it on plain old images rather than a list and a video.

Here's most of the code used for the page (I've cut out the parts for legal stuff you see at the bottom of some websites.) Apologies if I've put too much code here.

.iconsize{
    max-height:20px;
    max-width:auto;
}

.socialmedia{
    list-style-type:none;
    text-align:left;

}


body{
    font-family: Bahnschrift SemiBold;
    color: white;
    background-color: #231828;
    text-align: center; 
    margin-left: 20px;
    float:center;
}

.sub{
    max-height:75px;
    max-width:auto;
}

.sub2{
    max-width:60%;
}

#header{
    align-content:top;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    max-height:25%;
    max-width:auto;

}


.imgsize{
    max-height:5%;
    max-width:auto;
}




#content{
    display:inline-block;
    float:left;
}


.character{
    max-width:33%;
    max-height:auto;
    /*float:left;*/
}


#characters{
    float:left;
    text-align:left;
}

.charsize{
    max-width:33%;
    max-height:auto;
}

.nobull{
    list-style:none;
}

#interview{
    float:right;
}
<html>
    <title>CHARACTERS</title>
    <link href="media stylesheet.css" rel="stylesheet" type="text/css">
<body>

    <!-- Headers/Links -->

    <div>
        <a href='main page.html'><img src="https://66.media.tumblr.com/1c06e6d615743d3e39874fd396ad0404/tumblr_ptb3gnYXfg1w1tw8ao8_1280.png" alt="OTHERHEAD"></a>
        <img src="https://66.media.tumblr.com/c26ab239b970f06aace8e3325da2ec7a/tumblr_ptb1qjzm3g1w1tw8ao9_1280.png" alt='THE OTHER WAY IS OUT'>

        <h1>
            <a class='link' href='characters.html'>CHARACTERS</a>|
            <a class='link' href='story.html'>STORY</a>|
            <a class='link' href='gallery.html'>GALLERY</a>|
            <a class='link' href='https://www.vue.co.uk'>BUY TICKETS</a>|
            <a class='link' href='https://www.amazon.co.uk'>SHOP</a>
        </h1>
        <h2>
            Follow us on social media!<br> 
            <a class='link' href='https://www.instagram.com'><img class='iconsize'src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c521.png'></a>
            <a class='link' href='https://www.facebook.com'><img class='iconsize' src='https://facebookbrand.com/wp-content/themes/fb-branding/assets/images/fb-logo.png?v2'></a>
            <a class='link' href='https://sony.tumblr.com'><img class='iconsize' src='http://pluspng.com/img-png/tumblr-vector-png-tumblr-icon-logo-vector-300.png'></a>
            <a class='link' href="https://www.twitter.com"><img class='iconsize' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c53e.png'></a>
        </h2>
        <br>
    </div>

    <!-- Character profiles -->

    <div id='content'>
        <div id='characters'>
            <h1>CHARACTERS</h1>
            <ul class='nobull'>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
            </ul>
        </div>

        <div id='interview'>
            <h1>INTERVIEW WITH PRODUCER X</h1>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PDWQQNDTea0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

I'd expect the list and the video to be lined up somewhat like the plan I made, but instead it's appearing like this on my computer.

Upvotes: 1

Views: 115

Answers (2)

jsadev.net
jsadev.net

Reputation: 2590

Using display: flex on #content instead of inline-block could solve your problem.

With display: flex we 'tell' the childelements to be shown 'side-by-side'. To learn more about display take a look at its documenation

Furthermore, if you use display: flex;, the use of float is not needed. But I have not removed it at the example below, because it was not necessary to get the example working.

.iconsize{
    max-height:20px;
    max-width:auto;
}

.socialmedia{
    list-style-type:none;
    text-align:left;

}


body{
    font-family: Bahnschrift SemiBold;
    color: white;
    background-color: #231828;
    text-align: center; 
    margin-left: 20px;
    float:center;
}

.sub{
    max-height:75px;
    max-width:auto;
}

.sub2{
    max-width:60%;
}

#header{
    align-content:top;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    max-height:25%;
    max-width:auto;

}


.imgsize{
    max-height:5%;
    max-width:auto;
}




#content{
    display:flex;
    float:left;
}


.character{
    max-width:33%;
    max-height:auto;
    /*float:left;*/
}


#characters{
    float:left;
    text-align:left;
}

.charsize{
    max-width:33%;
    max-height:auto;
}

.nobull{
    list-style:none;
}

#interview{
    float:right;
}
<html>
    <title>CHARACTERS</title>
    <link href="media stylesheet.css" rel="stylesheet" type="text/css">
<body>

    <!-- Headers/Links -->

    <div>
        <a href='main page.html'><img src="https://66.media.tumblr.com/1c06e6d615743d3e39874fd396ad0404/tumblr_ptb3gnYXfg1w1tw8ao8_1280.png" alt="OTHERHEAD"></a>
        <img src="https://66.media.tumblr.com/c26ab239b970f06aace8e3325da2ec7a/tumblr_ptb1qjzm3g1w1tw8ao9_1280.png" alt='THE OTHER WAY IS OUT'>

        <h1>
            <a class='link' href='characters.html'>CHARACTERS</a>|
            <a class='link' href='story.html'>STORY</a>|
            <a class='link' href='gallery.html'>GALLERY</a>|
            <a class='link' href='https://www.vue.co.uk'>BUY TICKETS</a>|
            <a class='link' href='https://www.amazon.co.uk'>SHOP</a>
        </h1>
        <h2>
            Follow us on social media!<br> 
            <a class='link' href='https://www.instagram.com'><img class='iconsize'src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c521.png'></a>
            <a class='link' href='https://www.facebook.com'><img class='iconsize' src='https://facebookbrand.com/wp-content/themes/fb-branding/assets/images/fb-logo.png?v2'></a>
            <a class='link' href='https://sony.tumblr.com'><img class='iconsize' src='http://pluspng.com/img-png/tumblr-vector-png-tumblr-icon-logo-vector-300.png'></a>
            <a class='link' href="https://www.twitter.com"><img class='iconsize' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c53e.png'></a>
        </h2>
        <br>
    </div>

    <!-- Character profiles -->

    <div id='content'>
        <div id='characters'>
            <h1>CHARACTERS</h1>
            <ul class='nobull'>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
                <li><img class='charsize' src='https://66.media.tumblr.com/96b9a4eaf36f6bbb4af2a5a53ad616c7/tumblr_ptp79sro0e1w1tw8ao1_540.png' alt='text'></li>
            </ul>
        </div>

        <div id='interview'>
            <h1>INTERVIEW WITH PRODUCER X</h1>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PDWQQNDTea0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

Upvotes: 1

Stefan Joseph
Stefan Joseph

Reputation: 555

Try using display: flex; since it gives more flexibility in handling alignment and also removes the use of float properties. Also better if you can use classes instead of ids. This is a sample skeleton code. Hope it helps

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.header {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: .5rem;
}

.character-card {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: .5rem;
}

.character-img {
  margin-right: .5rem;
}

.characters-container {
  margin-right: .5rem;
}

.flex-grow-1 {
  flex-grow: 1
}
<div class="header d-flex flex-column align-items-center justify-content-center">
  <span>HEADER</span>
</div>

<div class="d-flex flex-row">
  <div class="characters-container d-flex flex-column">
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
    <div class="character-card d-flex flex-row align-items-center">
      <img class="character-img" src="https://via.placeholder.com/50">
      <span>Character Details</span>
    </div>
  </div>
  <div class="video-container d-flex flex-column flex-grow-1 align-items-center">
    <span>Video</span>
    <img src="https://via.placeholder.com/150">
  </div>
</div>

Upvotes: 1

Related Questions