I'm very new to programming but so far I'm addicted to it! I've looked on this site before posting my own question. I have found part of what I looked for but after trying few codes around, it didn't work so I thought about breaking the ice and asking for help!
Note: I'm using Kompozer.
What I try to attempt: I want the header and the footers to be full width while keeping the rest centered. I also want the white space below the footer to be full width just like at the top of the header. See this example.
Compared to that website, my website is yes centered but there is white space on each side and a bit of it below my footer. I hope I'm being clear enough for you to give me a hand! Thanks a lot!
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
#wrap {
margin: 0 auto;
width: 1156px;
}
<body>
<div id="wrap">
<div id="headers">
<div id="left">
<div id="h1">
<div style="text-align: left;">
<div style="text-align: left;">
<img style="width: 27px; height: 27px;" alt="" src="images/phone-icon-hi.png" align="top" vspace="5">+1-844-Meb-Zone
<img style="width: 27px; height: 27px;" alt="" src="images/icon-mail-grey-150x150.png" align="top" vspace="5">support#meb-zone.com
<br>
</div>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="h2">
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">Try Our Customer Rewards Program & Save Money on every order!
<img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">
<br>
</div>
</div>
</div>
<div id="menus">
<div id="left">
<div id="m1">
<div style="text-align: center;">
<div style="text-align: left;">
<img style="width: 384px; height: 76px;" alt="" src="logo/LGO2015_2.png" align="middle">
<br>
</div>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<br>
</div>
</div>
<div id="navigations">
<div id="left">
<div style="text-align: center;" id="nav1">
<div style="text-align: left;">HomeStoreBlogContactFAQ
<br>
</div>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="n2">
<img style="width: 18px; height: 18px;" alt="" src="images/user.png" align="top" vspace="5">My Account
<img style="width: 18px; height: 18px;" alt="" src="images/basic1-136_heart_favorite_list-128.png" align="top" vspace="5">My wishlist
<img style="width: 24px; height: 24px;" alt="" src="images/36.png" align="top" vspace="5">Checkout
<img style="width: 21px; height: 21px;" alt="" src="images/checkout-empty-128.png" align="top" vspace="5">Cart
<img style="width: 18px; height: 18px;" alt="" src="images/protection_lock-512.png" align="top" vspace="5">Login
<br>
<br>
<br>
</div>
</div>
</div>
<div style="text-align: left;">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
<br>
</div>
<br>
<br>
<br>
<br>
<div id="store_content">
<div id="left_st">
<div id="category">category left</div>
</div>
<div id="right_st">
<div id="products">products left</div>
</div>
</div>
<div id="footers">
<div id="left">
<div style="text-align: center;">
<div style="text-align: left;">SERVICE
<br>Contact Us
<br>Blog
<br>FAQ's
<br>Customer Rewards Program
<br>
</div>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="right">
<div style="text-align: right;" id="f2">ABOUT MEB ZONE
<br>Shipping & Payment
<br>Terms Of Service
<br>Return Policy
<br>Privacy Policy
<br>Company Information
<br>
</div>
</div>
</div>
<div id="bottom_footer">
<br>
<div style="text-align: center;">
Copyright © 2015 Meb Zone.com All rights Reserved.
<br>
</div>
<br>
</div>
</div>
</body>
I think your problem is from the body.
Try this:
body {
padding:0;
margin:0;
}
or this..
<body style="margin:0; padding:0">
(all your stuff here)
</body>
Related
All my pictures must meet the following criteria:
1). Whenever using computer or cell phone to view, must appear 4 items on same line, without RWD function.
2) No matter what the height and width measurements all outer frame must be identical, I spent days to adjust like this, but I found distance from picture to picture (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) are different, please advise how to adjust all spaces between pictures to be exactly the same.
Another question is how to control ever line's spacing? If I key in xxx, every line's space height will be too wide, need to shrink the height, I still cannot solve through setting, can anyone lend a helping hand? Appreciate it very much.[problem][1]
website URL
<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
<tr>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
</table>
You should not be using table.
You should be using the grid layout.
Here is a great guide.
EDIT:
Does this work for you?
.grid-container {
display: grid;
/* Use % instead of px for it to be proportionnal to the frame width */
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 15px;
padding: 0px;
}
.grid-item {
background-color: lightgreen;
}
.grid-item>img{
/* make it so the image take up the whole grid-item width */
width: 100%;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="">
IMAGE
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
</div>
This is the layout that I want to achieve
But for some reason when I add the paragraph right next to the picture, it breaks the whole div, and I'm left with this:
Also, you can see that instead of overflowing, it tries to concatenate it. It even adds a ruler at the bottom.
This is my code:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
Let me note that there is enough space to fit the text, it just breaks the moment it reaches the end of the screen.
You can use flexbox to solve this probplem. Just add 'display: flex;' property to the container element:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div style="display: flex;">
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
For long paragraph issue:
Add word-break:break-all style inline body tag.
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="word-break:break-all; background-color:#f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
If I understood your issue correctly, you want the text to overflow to the next line instead of creating a horizontal scrollbar?
For this you'll need to give the div a defined width and add word-wrap: break-word;
#overflow{
width:100vw;
word-wrap: break-word;
}
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div style="display: inline-block; ">
<img src="./images/karta_small.jpg" width="180" height="280" border="0" hspace="60" style="display:inline-block; word-break: break-all">
</div>
<div style="display: inline-block; vertical-align: top">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div id="overflow">
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
There is a much simpler way to add text next to an image: just put them in the same div, and add the style float: left; to the image, like this:
<htmL>
<head>
<title>Ohrid</title>
</head>
<body style="background-color: #f1f1f1">
<h1 style="color: #00dd00">Ohridsko Ezero</h1>
<hr style="background-color: #0d0; height:2px; border: none;">
<div>
<div>
<img src="./images/karta_small.jpg" width="180" height="280" hspace="60" style="float: left;">
<div style="font-size: 14px; font-family: Tahoma">
<h2 style="margin: 0">Osnovni geografski i hidrografski karakteristiki</h2>
<h2 style="margin: 0">Zivotinski i rastitelen svet</h2>
<h2 style="margin: 0">Riben Svet</h2>
<h2 style="margin: 0">Karakteristiki na nekoi vidovi ribi</h2>
</div>
<div>
<img src="./images/logo.gif" width="50px;" height="25px;" style="display: inline-block">
<span style="display:inline-block; vertical-align: top">
Prebaraj na Google za Ohridskoto Ezero
</span>
</div>
<div style='word-break: break-word;'>
<!-- imagine this is the paragraph -->
asdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdasasdasdasdsdaasdasdadsadsadsdas
</div>
</div>
</div>
</body>
</htmL>
To wrap the single word paragraph to the next line, add style='word-break: break-word;' to the div that contains it.
I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row
I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>
I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>
I've searched and tried all Stackoverflow solutions without success.
I've this code and I'm using bootstrap3
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="Images/social/facebook.png" alt="facebook" class="footerimg" />
<img src="Images/social/twitter.png" alt="twitter" class="footerimg" />
<img src="Images/social/youtube.png" alt="youtube" class="footerimg" />
</div>
<div class="col-md-4 col-md-offset-4">
<p class="text-right">© <%: DateTime.Now.Year %> Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p>
</div>
</div>
</div>
</footer>
I would like to vertically center col-md-4 elements and I have footer styles like this:
footer {
background-color: #000;
color: #fff;
height: 120px;
}
I've already tried with table-cell applied to col-md-4 but without success.
Can you suggest a solution?
If you want something like this : (images are not shown)
I made a live example.
This is the code :
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="centered">
<img src="Images/social/facebook.png" alt="facebook" class="footerimg" />
<img src="Images/social/twitter.png" alt="twitter" class="footerimg" />
<img src="Images/social/youtube.png" alt="youtube" class="footerimg" />
</div>
</div>
<div class="col-md-4 col-sm-4 col-sm-offset-4 col-md-offset-4">
<div class="centered">
<p class="text-right">© Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p>
</div>
</div>
</div>
</div>
</footer>
And the CSS
footer {
background-color: #000;
color: #fff;
height: 120px;
display: table;
width: 100%;
}
.centered {
display: table-cell;
vertical-align: middle;
height: 120px;
}
Ref : centering-in-the-unknown
Exactly the div tag should be place in right hand side but this is placed in left hand side only in firefox.
My page looks fine in any other browser but in firefox the page looks differnet my code is
<div style="width: 400px; height: 280px; float:left; margin-left: 15px;margin-top: 3px">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="image/forslider/slider1.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="image/forslider/slider2.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="image/forslider/slider3.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="image/forslider/slider4.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="image/forslider/slider5.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<img src="image/forslider/slider6.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
</div>
</div>
</div>
</div>
the div tag must be placed in right hand side.
Try to change from float:left; to float:right; in the first div
Try something like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#right {
text-align: left;
width: 200px;
position:absolute;
right:1%;
background-color: blue;
}
</style>
</head>
<body>
<div id="right">Some Text</div>
</body>
</html>