CODEWITHSUNDEEP
css
user2252219
user2252219

Reputation: 865

Getting a div to sit beside another

I can't get .block-description and .block-img to sit beside each other inside a wrapper .block.

.block { 
background-color:#E3DF8A;
width:100%;
 }

.block-description {
display: inline-block;
width:50%;
}

.block-img{
display: inline-block;
width:50%;
}

http://jsfiddle.net/6z23v1e8/

Upvotes: 0

Views: 31

Answers (4)

Jordan Davis
Jordan Davis

Reputation: 1520

You can achieve this using the Flexible Boxes model which is a new layout-mode made to improve upon the standard box model by replacing the float: property.

For browser compatibility reasons using Flexible Boxes consult this - Compatibility Chart

I used HTML5 semantic tags (section, figure, article) in the example code below to add clarity and "definitive" meaning to your page content, increasing SEO.

Related Information

Here is the JSFiddle Demo

Screenshot:

enter image description here

//HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css"
</head>
<body>
    <section id="left-panel"></section>
    <section id="right-panel">
        <article>
            <figure>
                <img src="http://www.newton.ac.uk/files/covers/968361.jpg">
            </figure>
            <h1>Modurra Shelving</h1>
        </article>
    </section>
</body>
</html>

//CSS

body{
    margin: 0 !important;
    width: 100vw;
    height: 100vh;
    
    display: -webkit-flex;
    display: flex;
}   
#left-panel{
    background: #5c5c5c;
    -webkit-flex: 1;
    flex: 1;
}
#right-panel{
    display: -webkit-flex;
    display: flex;
        
    -webkit-flex-direction: column;
    flex-direction: column;
    
    -webkit-flex: 1;
    flex: 1;
    background: #ECF0F1;    
}
article{
    display: -webkit-flex;
    display: flex;  
}
h1{
    -webkit-align-self: center;
    align-self: center;
}

Upvotes: 0

Cheslab
Cheslab

Reputation: 1924

May be display: table will do the trick

#right-panel {
    background-color:#DB9395;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: auto;
}
.block {
    background-color:#E3DF8A;
    width:100%;
    display: table;
    table-layout: fixed;
}
.block-description {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 50%;
}
.block-img {
    display: table-cell;
    width:100%;
}
<div id="right-panel">
  <div class="block" id="1">
    <div class="block-description">
      <span class="block-description-span">Modurra Shelving</span>
    </div>
    <img class="block-img" alt="" src="http://www.newton.ac.uk/files/covers/968361.jpg">
  </div>
</div>

Upvotes: 1

Thaillie
Thaillie

Reputation: 1362

You could use

.block:after {
    display: block;
    content: " ";
    clear: both;
}
.block-description {
    display: inline-block;
    width:50%;
}
.block-img {
    display: inline-block;
    width:50%;
    float: left;
}

And to switch what block is in the front just switch the float to the other element.

Fiddle: https://jsfiddle.net/mudd2L0g/

Upvotes: 0

Charlie Hall
Charlie Hall

Reputation: 577

try changing 

.block {
background-color:#E3DF8A;
width:100%;
}

to

.block {
background-color:#E3DF8A;
width:100%;
white-space:nowrap;
}

http://jsfiddle.net/6z23v1e8/1/

Upvotes: 0

Related Questions