I'm trying to draw the black border around Test1 - Test4 to also span around Test5. At the moment, Test5 falls outside. Does anyone know how to draw it to include Test5?
.description {
border: 1px solid;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Add overflow: auto; to the container to include floated elements:
.description {
border: 1px solid;
overflow: auto;
}
.descriptionTop {
display: inline-block;
}
.altOffer {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.prices {
text-align: right;
float: right;
}
.promotion {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="altOffer">Test2</span>
</div>
<div class="prices">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="promotion">Test5</div>
</div>
</div>
This is because .prices has float. Explanation of the problem
add the following to your css (the css of famous clearfix class) -
.description:after {
content: "";
display: table;
clear: both;
}
.description {
border: 1px solid;
}
.description:after {
content: "";
display: table;
clear: both;
}
.descriptionTop {
display: inline-block;
}
.ao {
padding: 5px;
font-weight: 700;
text-transform: uppercase;
}
.pr {
text-align: right;
float: right;
}
.pm {
border: solid 1px #53a318;
border-radius: 3px;
color: #53a318;
box-sizing: border-box;
font-size: 12px;
float: right;
padding: 2px 8px;
}
<div class="description">
<div class="descriptionTop">
<span class="descriptionLeft">Test1</span>
<span class="ao">Test2</span>
</div>
<div class="pr">
<div>
<span>Test3</span>
<span>Test4</span>
</div>
<div class="pm">Test5</div>
</div>
</div>
Related
I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.
When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What should I add/change to make all 3 pics looks the same?
Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
Viac informácií
</div>
</div>
</div>
Sass:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}
Something like this ?
.card {
width: 200px;
height: 300px;
display: inline-block;
margin: 12px;
border: 1px solid black;
overflow: hidden;
display: flex;
flex-flow: column;
}
.card .title {
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .link {
color: blue;
text-decoration: underline;
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .image {
flex: 1 1 auto;
overflow: hidden;
}
.card .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="card">
<div class="title">Some title</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="link">Some link</div>
</div>
<div class="card">
<div class="title">Some title that is way too long to fit in 200px</div>
<div class="image">
<img src="https://picsum.photos/1024/768">
</div>
<div class="link">Some link that is also way too long for this little box</div>
</div>
Well, it is not probably best practise. But I just add
max-width: 57px; (+1px)
and it works just fine.
Consider the following fiddle,
https://jsfiddle.net/r5ttk64r/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="../css/tabs.css">
</head>
<body>
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
I've been trying to make the border expand along with the height of the blue box.
Making the divs display: block did not work.
Making the section as Overflow: hidden does make the border extend BUT pulls the border down. I need that margin-top:-30px in place so the border looks like it's coming out of the tabs and not starting right under it.
Any ideas?
I don't know if i get it right. A possible solution is to use the clearfix technique. If you want some element to "hold" the inner elements that "float" inside, use this snippet:
.clearfix::after {
display: block;
content: "";
clear: both;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active clearfix">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
So in your case, just add the class clearfix to specificationcontent.
I am trying to change the color of a row of a table on hover.
by using row: hover, but by this way it is just hovering a perticular cell which is obvious.
but when I try using row cell: hover, then it is not having any effect. this is my html.
JSfiddle: https://jsfiddle.net/f4ojhxco/2/
<div id="table">
<div class="header-row row">
<span class="cell">SI. No.</span>
<span class="cell">Application Date</span>
<span class="cell">Customer Name</span>
<span class="cell">Loan Amount</span>
<span class="cell">Loan Status</span>
<span class="cell">Action</span>
</div>
<div class="row" *ngFor="let item of customerList ; let i= index;">
<input type="radio" name="expand">
<span class="cell" data-label="SI. No.">{{i+1}}</span>
<span class="cell" data-label="Application Date">{{item.date}}</span>
<span class="cell" data-label="Customer Name">
{{item.name}}</span>
<span class="cell" data-label="Loan Amount">{{item.amount}}</span>
<span class="cell" data-label="Loan Status">{{item.status}}</span>
<span class="cell" data-label="Action">
More Details
</span>
</div>
</div>
Give the style as follows by removing the space between the class .row and :hover.
.row:hover {
background: green;
}
Just add the !important keyword.
.row :hover {
background: green !important;
}
JSfiddle: https://jsfiddle.net/f4ojhxco/3/
Try This:
body {
background: #cacaca;
margin: 0;
padding: 20px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#table {
display: table;
width: 100%;
background: #fff;
margin: 0;
box-sizing: border-box;
}
.caption {
display: block;
width: 100%;
background: #64e0ef;
height: 55px;
padding-left: 10px;
color: #fff;
font-size: 20px;
line-height: 55px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
box-sizing: border-box;
}
.header-row {
background: #8b8b8b;
color: #fff;
}
.row {
display: table-row;
}
.row :hover {
background: green;
}
.cell {
display: table-cell;
padding: 23px;
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.primary {
text-align: left;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
#media only screen and (max-width: 760px) {
body {
padding: 0;
}
#table {
display: block;
margin: 44px 0 0 0;
}
.caption {
position: fixed;
top: 0;
text-align: center;
height: 44px;
line-height: 44px;
z-index: 5;
border-bottom: 2px solid #999;
}
.row {
position: relative;
display: block;
border-bottom: 1px solid #ccc;
}
.header-row {
display: none;
}
.cell {
display: block;
border: none;
position: relative;
height: 45px;
line-height: 45px;
text-align: left;
}
.primary:after {
content: "";
display: block;
position: absolute;
right: 20px;
top: 18px;
z-index: 2;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ccc;
}
.cell:nth-of-type(n+2) {
display: none;
}
input[type="radio"],
input[type="checkbox"] {
display: block;
position: absolute;
z-index: 1;
width: 99%;
height: 100%;
opacity: 0;
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
z-index: -1;
}
input[type="radio"]:checked~.cell,
input[type="checkbox"]:checked~.cell {
display: block;
border-bottom: 1px solid #eee;
}
input[type="radio"]:checked~.cell:nth-of-type(n+2),
input[type="checkbox"]:checked~.cell:nth-of-type(n+2) {
background: #e0e0e0;
}
input[type="radio"]:checked~.cell:nth-of-type(n+2):before,
input[type="checkbox"]:checked~.cell:nth-of-type(n+2):before {
content: attr(data-label);
display: inline-block;
width: 60px;
background: #999;
border-radius: 10px;
height: 20px;
margin-right: 10px;
font-size: 12px;
line-height: 20px;
text-align: center;
color: white;
}
input[type="radio"]:checked~.primary,
input[type="checkbox"]:checked~.primary {
border-bottom: 2px solid #999;
}
input[type="radio"]:checked~.primary:after,
input[type="checkbox"]:checked~.primary:after {
position: absolute;
right: 18px;
top: 22px;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid #ccc;
z-index: 2;
}
}
.cell{
height:10px;
background:green;
}
.cell:hover{
background:red;
}
<div id="table">
<div class="header-row row">
<span class="cell">SI. No.</span>
<span class="cell">Application Date</span>
<span class="cell">Customer Name</span>
<span class="cell">Loan Amount</span>
<span class="cell">Loan Status</span>
<span class="cell">Action</span>
</div>
<div class="row" >
<input type="radio" name="expand">
<span class="cell" data-label="SI. No.">1</span>
<span class="cell" data-label="Application Date">5-jan-2017</span>
<span class="cell" data-label="Customer Name">
mr xyz</span>
<span class="cell" data-label="Loan Amount">60k</span>
<span class="cell" data-label="Loan Status">open</span>
<span class="cell" data-label="Action">
More Details
</span>
</div>
</div>
Just remove space between .row and :hover
.row:hover{
background: green;
}
Try this
#table .row:hover {
/*add your css here*/
}
I was wondering if is it possible to create a submenu using divs? All online tutorials use this ul li thing. I don't know how to activate my submenu by hovering over an option. Should I add new class to "director" div? Incuding photos and code pieces.
HTML:
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
https://i.stack.imgur.com/cldDy.png
https://i.stack.imgur.com/TrvsC.png
It is semantically incorrect, though making it appear on hover, do like this
.menu_opcje:hover div {
display: block;
}
Sample snippet
.menu_opcje {
float: left;
min-width: 100px;
text-align: center;
border-right: dotted 2px black;
padding: 10px;
}
.menu_wysuwane {
min-width: 100px;
text-align: center;
border-bottom: dotted 2px black;
padding: 10px;
display: none;
}
.menu_wysuwane:hover {
background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
background-color: lightgray;
cursor: pointer;
}
.menu_opcje:hover div {
display: block;
}
<div id="menu">
<div class="menu_opcje">Strona główna</div>
<div class="menu_opcje">Galeria</div>
<div class="menu_opcje">Reżyserzy
<div>
<div class="menu_wysuwane">Quentin Tarantino</div>
<div class="menu_wysuwane">Bracia Coen</div>
<div class="menu_wysuwane">Wes Anderson</div>
</div>
</div>
</div>
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;