CODEWITHSUNDEEP
htmlcss
Cove
Cove

Reputation: 709

Text header block floating right in div in 3 column layout header

I have 3 column layout, all works fine: http://codepen.io/cove3010/pen/dGEmaZ

/* 1) CSS reset http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 2) Skeleton */
.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	background-position: top right;
}
.main_cont_width {width:1003px; margin:0 auto;}
.footer {background: #D5BAE4;}
.layout { overflow: hidden;}
.col1 { background: #C7E3E4; float: left; width: 200px; }
.col2 { background: #E0D2C7; margin: 0 200px 0 200px; /* Отступ справа и слева */}
.col3 { background: #ECD5DE; width: 200px; float: right; }
  
/* 3) Header */
.f_l {
	float:left;
	
}
.f_r {
	background-color:gold;
	position:relative;
	top:50px;
  right:50px;
	float:right;
}

/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
<html>
    <head>    
        <meta charset="utf-8">
    </head>
    <body>

<div class="main_cont_width">
    <div class="header clearfix">
        <img src="http://www.hromov.net/templates/hromov_main/images/guitar_top.jpg"><img src="http://www.hromov.net/templates/hromov_main/images/cassete_top.jpg">
    
    </div>
    <div class="layout">
        <div class="col1"><div class="wrap">Left column</div></div>
        <div class="col3"><div class="wrap">Right column</div></div>
        <div class="col2">Center column</div>
      </div>
    <div class="footer">Footer</div>
</div>
    </body>
</html>

Than I need to add custom text in header, so I decided to do it with div.
I wrapped 2 left pictures in div to make it float:left and new text div block with float:right. Clearfix for parent block. But something went wrong and clearfix isn't working as I expected:

http://codepen.io/cove3010/pen/wMbmQR

/* 1) CSS reset http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 2) Skeleton */
.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	background-position: top right;
}
.main_cont_width {width:1003px; margin:0 auto;}
.footer {background: #D5BAE4;}
.layout { overflow: hidden;}
.col1 { background: #C7E3E4; float: left; width: 200px; }
.col2 { background: #E0D2C7; margin: 0 200px 0 200px; /* Отступ справа и слева */}
.col3 { background: #ECD5DE; width: 200px; float: right; }
  
/* 3) Header */
.f_l {
	float:left;
	
}
.f_r {
	background-color:gold;
	position:relative;
	top:50px;
  right:50px;
	float:right;
}

/*4) Float divs clearfix*/
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
<html>
    <head>    
        <meta charset="utf-8">
    </head>
    <body>

<div class="main_cont_width">
    <div class="header clearfix">
        <div class="f_l"><img src="http://www.hromov.net/templates/hromov_main/images/guitar_top.jpg"><img src="http://www.hromov.net/templates/hromov_main/images/cassete_top.jpg"></div>
        <div class="f_r">Here goes some text<br>and some more</div>
    </div>
    <div class="layout">
        <div class="col1"><div class="wrap">Left column</div></div>
        <div class="col3"><div class="wrap">Right column</div></div>
        <div class="col2">Center column</div>
      </div>
    <div class="footer">Footer</div>
</div>
    </body>
</html>

So, what am I doing wrong?

Upvotes: 0

Views: 225

Answers (1)

Kai
Kai

Reputation: 312

Add position: relative to .header:

.header{
	height:149px; 
	background: transparent url("http://www.hromov.net/templates/hromov_main/images/right_top.jpg") 
	no-repeat; 
	background-position: top right;
        position: relative;
}

Remove both of the floats from .f_l & f_r and change .f_r position to absolute:

.f_r {
	background-color:gold;
	position: absolute;
	top:50px;
        right:50px;
}

This will position the text where you need it and no need for floats at all I believe.

Upvotes: 1

Related Questions