CODEWITHSUNDEEP
jqueryhtmlcss
Surge
Surge

Reputation: 57

How to split page in half using CSS?

I am trying to split the page in half so that there is an image on the left side and text on the right side. But for some reason, I am having issues. Can someone please guide me in the ride direction.

Thank you in advance!

HTML:

<section>
<div class="col-1"></div>
<div class="col-2">
    <div class="article">
        <h2 class="top"> The Title </h2>
        <p> This is a subtitle </p>
        <h1> Design Name </h1>
        <h2 class="bottom"> copyright 2014 </h2>
    </div>
</div>
</section>

CSS:

html {
    font-family: 'Helvetica', sans-serif;
    font-size: 10px;
    -webkit-font-smoothing: antialiased;
}
section {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.col-1 {
    left: 0;
    width: 50%;
    height: 100%;
    background: url(http://MyImageLink);
    background-position: center center;
    background-size: cover;
}

.col-2 {
    right: 0;
    background: #000015;
}

.article {
    color: #fff;
    text-align: center;
}

* {
    position: absolute;
    width: 100%;
}

h1 {
    bottom: 125px;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: .6rem;
    text-indent: .6rem;
}

h2 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1rem;
    text-indent: .1rem;
    text-transform: uppercase;
}

.top {
    top: 100px;
}

.bottom {
    bottom: 100px;
}

p {
    top: 50%;
    margin: -1em 0 0;
    font-size: 3.5rem;
    font-weight: 800;
}

Upvotes: 1

Views: 1105

Answers (7)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

DEMO:

Make sure you are using *{box-sizing:border-box; padding:0; margin:0;}

and change:

* {
position: absolute;
width: 100%;
}

to

h1, .top, .bottom, p {
 position:absolute;  
}

enter image description here

then set :

section {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    }
    .col-1, .col-2 {
    float:left;
    width: 50%;
    height: 100%;
    }

You are missing position absolute everywhere

Here is the full code:

*{box-sizing:border-box; padding:0; margin:0;}

html {
font-family: 'Helvetica', sans-serif;
font-size: 10px;
-webkit-font-smoothing: antialiased;
 height:100vh;
}
section {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.col-1, .col-2 {
float:left;
width: 50%;
height: 100%;
}
.col-1 {
background:#ccc url(http://MyImageLink);
background-position: center center;
background-size: cover;
}

.col-2 {
background: #000015;
}

.article {
color: #fff;
text-align: center;
}

h1, .top, .bottom, p {
 position:absolute;  
}

h1 {  
bottom: 125px;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: .6rem;
text-indent: .6rem;
}

h2 {
font-size: .8rem;
font-weight: 800;
letter-spacing: .1rem;
text-indent: .1rem;
text-transform: uppercase;
}

.top {
top: 100px;
}

.bottom {
bottom: 100px;
}

p {
top: 50%;
margin: -1em 0 0;
font-size: 3.5rem;
font-weight: 800;
}

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

I would try this code:

body, html {
    height:100%;
    margin:0;
    padding:0;
}
.container {
    width:100%;
    height:100%;
}
.col-1 {
    width:50%; 
    height:100%; 
    background-color:red;
    float:left;
}

Here you have an example: http://jsfiddle.net/u2pkwwn5/

Upvotes: 0

Jay
Jay

Reputation: 792

I have played around with your css, you need to remove the *{ position: absolute;} and also change some position absolutes to relative and add in a couple of floats too:) please try the css below;

html {
font-family: 'Helvetica', sans-serif;
font-size: 10px;
-webkit-font-smoothing: antialiased;
}
section {
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}

.col-1 {
left: 0;
width: 50%;
height: 100%;
background: url(http://MyImageLink);
background-position: center center;
background-size: cover;
    float: left;
}

.col-2 {
right: 0;
width: 50%;
    float: right;
background: #000015;
}

.article {
color: #fff;
text-align: center;
}

h1 {
bottom: 125px;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: .6rem;
text-indent: .6rem;
}

h2 {
font-size: .8rem;
font-weight: 800;
letter-spacing: .1rem;
text-indent: .1rem;
text-transform: uppercase;
}

.top {
top: 100px;
}

.bottom {
bottom: 100px;
}

p {
top: 50%;
margin: -1em 0 0;
font-size: 3.5rem;
font-weight: 800;
}

Upvotes: 0

Ke Vin
Ke Vin

Reputation: 2024

You could use the table display styles. This is exactly what you are trying to achieve, a table like layout. Simple and easy.

section {
    display: table;
    width: 100%;
}
.col-1, .col-2 {
    width: 50%;
    display: table-cell;
}

http://jsfiddle.net/fw3nw6gm/7/

Upvotes: 0

lharby
lharby

Reputation: 3265

Slightly more succinct:

[class^="col"] {
   float:left;
   width:50%;
}

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

Try the following

DEMO

STYLE

body{
    width: 100%;
}
.col-1, .col-2{
    width: 50%;
    float: left;
}
.col-1{
    background: #000;
    color: white;
}
.col-2{
    background: blue;
}

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

try this code DEMO

img:nth-of-type(2n+1) {
    float: left;
}

img:nth-of-type(2n) {
    float: right;
}

h1 {
    text-align:center;
}

or 

img:nth-of-type(2n+1) { float: left; }
   img:nth-of-type(2n) { float: right; display:none; }
h1 {
  text-align:center;
}

Upvotes: 2

Related Questions