During learning CSS I tried to make the exact example as you can see on the link below using clearfix (sorry for non-English text, but I have no other)
http://htmlbook.ru/files/images/layout2/3-41.png
I need to make it using float and clearfix hack
My code is:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning float</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="float.css">
</head>
<div class="col1 clearfix"><h3>Menu</h3>
<p>Best photo</p>
<p>By ages</p>
<p>Rate</p>
<p>By comments</p>
</div>
<div class="col2">
<div class="photo">
<p><img src="http://churchs.kiev.ua/images/stories/Hrams/Myzej/Sofia_kievsk_1.jpg" alt="" /></p>
<p class="caption">Софийский собор</p>
</div>
<div class="photo clearfix">
<p><img src="http://rybinsk.go2all.ru/imgs/92/1/85222.jpg" alt="" /></p>
<p class="caption">Польский костёл</p>
</div>
<p>This text should be below photos</p>
</div>
<p>This text should go below the columns</p>
<div class="footer">Подвал</div>
</body>
</html>
CSS
.col1 {
background-color: #BDBDBD;
width: 250px;
margin-right: 10px;
float: left;
}
.col2 {
background-color: #A9F5F2;
float: left;
width: 500px;
}
.photo {
float: left;
margin-right: 10px;
width: 170px;
}
img {
width: 150px;
height: 150px;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
text-align: center;
}
What's wrong with using of clearfix.
Will appreciate any answer!
the clearfix:after 'method' is used to wrap floatting child when the container is not in position absolute or fixed, floatting or in display:inline-block,inline-table or table.
In your case, the element you want to clear stands after a floatting element, you only need to clear them. both, left or right.
http://www.w3.org/wiki/CSS/Properties/clear
.col1 {
background-color: #BDBDBD;
width: 250px;
margin-right: 10px;
float: left;
}
.col2 {
background-color: #A9F5F2;
float: left;
width: 500px;
}
.photo {
float: left;
margin-right: 10px;
width: 170px;
}
img {
width: 150px;
height: 150px;
}
.clearfix {
clear: both;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
text-align: center;
}
/* add some space to clear the footer */
body {
padding-bottom:2em;/* average height of current footer: tune it if needed */
min-width:800px;
}
<div class="col1 "><h3>Menu</h3>
<p>Best photo</p>
<p>By ages</p>
<p>Rate</p>
<p>By comments</p>
</div>
<div class="col2">
<div class="photo">
<p><img src="http://churchs.kiev.ua/images/stories/Hrams/Myzej/Sofia_kievsk_1.jpg" alt="" /></p>
<p class="caption">Софийский собор</p>
</div>
<div class="photo clearfix">
<p><img src="http://rybinsk.go2all.ru/imgs/92/1/85222.jpg" alt="" /></p>
<p class="caption">Польский костёл</p>
</div>
<p class="clearfix">This text should be below photos</p>
</div>
<p class="clearfix">This text should go below the columns</p>
<div class="footer">Подвал</div>
Related
I would like to have my 4 social pictures (alt=test) in the center of my div (now they are appearing on the top center). I put text-align: center in .socials but it is not working. I also tried to put it in .socialdivs but it is also not working. The HTML and CSS code is below.
.socials {
width: 100%;
background-color: #5e6066;
text-align: center;
}
.socialdivs {
width: 100%;
margin: auto;
}
.fb {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover {
background-color: #4668b3;
}
.lin {
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover {
background-color: #00a0dc;
}
.insta {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover {
background-color: #405de6;
}
.golden {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover {
background-color: #fcbf17;
}
.info {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
Any help would be appreciated.
You can use line-height: 155px; to center it vertically. It needs to have the same height as the container. So, when the height of the container change, the line-height needs to be adjusted.
.socials
{
width:100%;
background-color: #5e6066;
text-align: center;
line-height: 155px;
}
.socialdivs
{
width: 100%;
margin: auto;
}
.fb
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover
{
background-color: #4668b3;
}
.lin
{
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover
{
background-color: #00a0dc;
}
.insta
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover
{
background-color: #405de6;
}
.golden
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover
{
background-color: #fcbf17;
}
.info
{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
</html>
You can use padding to set text in middle of div,(along with text-align:center;) like this:
.socialdivs
{
padding: 10%;
font-size: 18px;
text-align:center;
width:20%;
}
padding and margin by default show a good result in anchor tag so use display block in it
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.
Here is my code:
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}
.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}
.third img {
float: left;
position: relative;
}
And my html:
<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>
Help please!
I can't comment yet…
Your original code on fiddle
The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:
The modified version (without padding) on fiddle
Now it's not "pulled too far on the left".
What you can do instead, is to add margin:25px; to .third class, like this:
The modified version (with margin) on fiddle
EDIT: A CLEAN REVISITED VERSION:
The HTML code:
<div class="grid">
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/nemo/350/200/1" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/futurama/350/200/6" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/up/350/200/6" />
</div>
</article>
</div>
The CSS code:
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
}
.third {
display:table-cell;
height: 150px;
width: 150px;
padding: 25px;
border-radius:25px;
vertical-align:middle;
background-color:#eee; //added just for test display
}
.third img {
border:none;
width: 100%;
height: auto;
}
The result here on fiddle.
Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.
Please use the updated code I think it will work.
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.third {
display:block;
border-radius: 25px;
}
.third img {
width:100%;
height:auto;
}
Here's a possible correction of your code to you :
See this fiddle
I've changed a little the HTML structure like this :
<section class="home">
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
</section>
It's better for semantic to have section around article and not article around article.
I've simplify the CSS code like this :
section.home {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
article.third {
text-align: center;
float: left;
width: 150px;
position: relative;
padding: 25px;
overflow: hidden;
}
.third img {
border-radius: 25px;
width: 100%;
position: relative;
}
If you use fluid width for container, then use fluid width for padding/margin of article.
In that case, i use fixed width of the container and for padding values.
I have a 'contact' page with three icons laid out horizontally for 'phone', 'email', and 'facebook'. Below each icon is some text, like the phone number, email address, and facebook link.
They're all centered up, except the email address text is bumped to the right a bit. I can't figure out whats causing it. Everything else is centered. Its probably something obvious that I am overlooking.
#contact {
clear: both;
position: relative;
width: 100%;
float: left;
display: block;
}
#contact img {
width: 100%;
overflow: hidden;
}
#phone {
background: yellow;
width: 300px;
height: 30px;
display: block;
float: left;
}
#email {
background: cyan;
width: 300px;
height: 30px;
display: block;
float: left;
}
#fbc {
background: pink;
width: 300px;
height: 30px;
display: block;
float: left;
}
#contactcont {
display: block;
clear: both;
height: 350px;
width: 960px;
margin-left: auto;
Margin-right: auto;
}
<!--Contact-->
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<a name="contanch"></a>
<div id="contactcont">
<div id="phone">
<img src="Images/phone.jpg" alt="phone" width="300" height="195">
<br>
<h5 align="center">1-800-759-5275</h5>
</div>
<div id="email">
<img src="Images/email.jpg" alt="email" width="300" height="195">
<br>
<h5 align="center"><a href="mailto:sales#company.com">
sales#company.com</a></h5>
</div>
<div id="fbc">
<img src="Images/fbcont.jpg" alt="fbcont" width="300" height="195">
<br>
<h5 align="center">Like us on Facebook!</h5>
</div>
</div>
After a quick look at your css it doesn't look to me like you are using text-align. If you use text-align:center in your css for each icons parent div you should get the result you are looking for.
I want to have a div with two images on the left, some centered text and some text on the right.
One of the many attempts:
http://jsfiddle.net/yu8bz4h4/
The problem is that I cant figure out how to get the p elements in the same line while keeping center and right the alignments
HTML:
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center" >centered</p>
<p class="right" >right</p>
</div>
CSS:
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
text-align: center;
width: auto;
}
.right {
text-align: right;
width: auto;
}
Replace all p with div.Then write css code.The text comes in one line.
Hope this works.
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
margin-left:50%;
width: auto;
position:absolute
}
.right {
margin-left:100%;
width: auto;
position: absolute;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<div class="center" >centered</div>
<div class="right" >right</div>
</div>
I am pretty much sure you wanted something like this. Though your question is not clear. Never forget to write codes with semantic meaning. Here's your solution following more semantic way: codepen.
Or here:
.outer {
height: 50px;
width: 800px;
overflow: hidden;
}
.column {
width: 33.33%;
float: left;
}
.icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
<div class="outer">
<div class="column">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
</div>
<div class="column">
<p class="center">centered</p>
</div>
<div class="column">
<p class="right">right</p>
</div>
</div>
Revised code in response to OP's comments:
.outer {
height: 50px;
width: 300px;
position: relative;
}
.icon {
width: 44px;
height: 44px;
float: left;
}
.center {
text-align: center;
width: 100%;
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
width: auto;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center">centered</p>
<p class="right">right</p>
</div>