I have three child divs inside a container and I want to align these div's horizontally. I tried using the css float property but the circles are becoming oval.
Markup Code:
<div class="container info-box clearfix">
<div class="circle">
<div class="content">
<h3>Learn at your own Pace</h3>
</div>
</div>
<div class="circle">
<div class="content">
<h3>Methodic learning</h3>
</div>
</div>
<div class="circle">
<div class="content">
<h3>Unique Approach</h3>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
background-color: #3cb371;
border-radius: 50%;
padding: 5px 10px;
width: 20%;
}
.content {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: auto;
}
.circle:before {
content: '';
display: block;
margin-top: 100%; /* 1:1 ratio */
}
.clearfix:before, .clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both
}
.info-box{
margin-top: 20px;
width:100%;
}
.container{
margin-left: auto;
margin-right: auto;
padding-left:15px;
padding-right:15px;
text-align:center;
}
*{
box-sizing: border-box;
}
I tried using the float property but the circles are turning into oval. Please let me know where I am going wrong.
Code on jsfiddle: jsfiddle
Circles are becoming oval because of padding property you have applied. just remove padding: 5px 10px; and add float:left; in the circle class.
.circle {
position: relative;
background-color: #3cb371;
border-radius: 50%;
float: left;
width: 20%;
}
Please use display: inline-block;
http://jsfiddle.net/K6PKK/
try this:
div.clearfix {
display : table;
}
div.circle {
display : table-cell;
}
Related
I got a question:
I want my text "left" to go left and my text "right" to go right and want them both on the same line.
I have added a text-align in CSS but it doesnt work. I have also added a display:inline-block so the 2 different divs can be on the same line. I also want to add a margin between the border of the website and the text. I tried width:90% in CSS but then the text is on the same line anymore.
My Problem
Here is my HMTL code
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Here is my CSS code:
.footer {
position:absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #160a70;
color: white;
}
.footerright {
text-align: left;
display: inline-block;
}
.footerleft {
text-align: right;
display: inline-block;
}
text-align won't have any effect in your case because the parent width is the width of child content since you set display:inline-block. The text is already close to both edges.
The simpliest solution in this case is to use float and simply add padding to main container to create the space between border. Also change width:100% with right:0 to avoid overflow:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
background-color: #160a70;
color: white;
padding:20px; /* For spacing */
}
.footerright {
float: right;
display: inline-block;
}
.footerleft {
display: inline-block;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Or consider the use of flex which is better:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
padding:20px;
background-color: #160a70;
color: white;
display:flex;
}
.footerright {
text-align: right;
flex:1;
}
.footerleft {
text-align: left;
flex:1;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Or add width to your element and don't forget to clear the whitespace:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
padding:20px;
background-color: #160a70;
color: white;
display: inline-block;
font-size: 0;
}
.footerright {
font-size: initial;
text-align: right;
width: 50%;
display: inline-block;
}
.footerleft {
font-size: initial;
text-align: left;
width: 50%;
display: inline-block;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
I've had a look for similar questions and tried removing the position attribute but unfortunatley that didn't work.
I have a container with 2 divs inside, and both those divs contain one image each. The images display correctly but the overall container has a height of 0px. Here is an image with the developer console open: https://gyazo.com/277d635619eb80d2d3f63a1c28c80314
This happened after trying to make the images responsive with width: 100%; and height: auto;
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
.leftLanding {
/*position: relative;*/
width: 80%;
float: left;
}
.rightLanding {
/*position: relative;*/
width: 80%;
float: right;
}
.landingImage {
width: 100%;
height: auto;
}
<div id="landing-images">
<div class="leftLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
</div>
You just need to add.
overflow:auto; to #landing-images.
So, Your CSS will be like,
#landing-images {
width: 100%;
height: auto;
overflow:auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
Because floating the child element removes it from the document flow and the parent will collapse. By adding the overflow rule, the desired behavior is restored.
The problem are the float attributes, use display: block and margin instead.
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
position:relative;
}
.leftLanding {
position: relative;
width: 80%;
display:block;
margin-right:auto;
}
.rightLanding {
position: relative;
width: 80%;
margin-left:auto;
}
.landingImage {
width: 100%;
height: auto;
}
<div id="landing-images">
<div class="leftLanding">
<img class="landingImage" src="http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.nationalgeographic.com/content/dam/animals/pictures/mammals/g/gray-wolf/gray-wolf_01.ngsversion.1484679603276.JPG">
</div>
</div>
You must clear the wrapper whenever there is a floating element inside it.
#landing-images {
width: 100%;
height: auto;
margin-top: 10%;
margin-bottom: 5%;
border: solid 2px black;
}
.leftLanding {
/*position: relative;*/
width: 80%;
float: left;
}
.rightLanding {
/*position: relative;*/
width: 80%;
float: right;
}
.landingImage {
width: 100%;
height: auto;
}
.clearfix::after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
<div id="landing-images" class="clearfix">
<div class="leftLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
<div class="rightLanding">
<img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
</div>
</div>
I always use the standard clearfix class with the following style:
.clearfix::after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
So, always have such a class on your global CSS. And add this class to all the wrappers which has floating elements inside it.
Read more about clearfix concept at:
https://css-tricks.com/snippets/css/clear-fix/
I've tried looking up tutorials/examples/codepens like this but wasn't successful. Please link to any I might have missed.
I'm trying to make this image into html/css/Bootstrap, which shouldn't be so bad, except the vertical line might be a difficult (could use advice on this):
And then when you're changing the size of your browser or looking at it on portrait on a smartphone, I want it to look more like:
But I don't know how to go about doing this so that the circle and caption that correspond to each other in the horizontal timeline are also together on the vertical timeline.
Thank you so much for your help! Basic codepens would be super appreciated!
Try This
.Img1{
margin-top:30px;
position:relative;
}
.Img1:before{
content: "";
position: absolute;
left: 0;
right: 0;
height: 21px;
width: 1px;
background: red;
margin: 0 auto;
top: -26px;
}
.Img1 img{width:100%;border-radius:50%;width:100px;
height:100px;}
.Text2{
width:200px;
}
.Img2{
margin-bottom:30px;
position:relative;
}
.Img2:before{
content: "";
position: absolute;
left: 0;
right: 0;
height: 21px;
width: 1px;
background: red;
margin: 0 auto;
bottom: -26px;
}
.Img2 img{width:100%;border-radius:50%;width:100px;
height:100px;}
.container {
float: left;
margin: 0 10px;
text-align:center;
}
#media screen and (max-width: 767px) {
.container {
float: none;
clear: both;
margin:20px 0;
}
.container:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.container{ display: inline-block;}
html[xmlns] .container { display: block;}
* html .container{ height: 1%;}
.container {display: block}
.Text1 {
float: right;
margin:30px 0;
}
.Img1 {
float: left;
margin-top:0;
}
.Text2 {
float: left;
margin:30px 0;
}
.Img2 {
float: right;
margin-bottom:30px;
}
.wrapper{width:60%;margin:0 auto;}
.Img2:before,.Img1:before{display:none;}
}
<div class="wrapper">
<div class="container">
<div class="Text1">
Idea formed
</div>
<div class="Img1">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">
</div>
</div>
<div class="container">
<div class="Img2">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png">
</div>
<div class="Text2">
Private funding for prototype raise
</div>
</div>
</div>
Right now I have used image but you can create a div instead of image. And I have just created structure you need to modify this code.
I want to achieve a flexible container with three images. One large one the left, two smaller ones (roughly one quarter of the size) aligned to the right of it:
When resizing the browser window, I want the three images to adjust accordingly while keeping the original proportions so the large image's baseline keeps aligned with the lower small image's baseline.
So far, I've tried the following code:
<div id="space">
<div id="large">
<img src="http://placehold.it/640x420" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
<div class="small">
<img src="http://placehold.it/320x200" />
</div>
</div>
#space {
width:100%;
}
#large {
width:60%;
float:left;
margin:1% 1%;
padding:0px;
}
.small {
width:30%;
float:left;
margin:1% 1%;
padding:0px;
}
img {
width:100%;
height:auto;
padding:0px;
margin:0px;
}
In case the images are slightly higher than the proportions allow, the images should be vertically centered in the respective container, the overflow should be hidden.
You can find this code on JSFIDDLE: https://jsfiddle.net/u8kksgbq/12/
Please help - I've been trying and trying and don't find a solution.
Thanks for your answers. This my final solution:
<section id="contact-pics">
<div class="pic-large">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="v-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
<div class="h-spacer">
<div class="dummy"></div>
<div class="pic-content">
</div>
</div>
<div class="pic-small">
<div class="dummy"></div>
<div class="pic-content">
<img src="http://192.168.178.20"/>
</div>
</div>
</section>
And the CSS:
#contact-pics {
img {
width: 100%;
height: auto;
}
overflow: auto;
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:left;
.dummy {
padding-top: 62%;
}
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:left;
.dummy {
padding-top: 62%;
}
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:left;
.dummy {
padding-top: 2535%;
}
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:left;
.dummy {
padding-top: 2.4%;
}
}
.pic-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
Guess there are easier solutions, but this one definitely works :-)
Fiddle
I don't know how much of an answer it is, but I gave it a try.
You have to put a vertical separator between small and large images, that way you can specify the "fake" margin between them in width: xx%;
As for horizontal separator, I tried it, but couldn't get it. The only solution that I can see is to create a transparent image and put between them. Set its width: 30% , just like the photos and that way it will keep the height: auto too.
Thanks for your question, I have tested some solutions and found the answer for # is the correct one, but the code isn't placed correctly. I have edited CSS as follow:
#contact-pics {
overflow: auto;
}
#contact-pics img {
width: 100%;
height: auto;
}
.pic-large {
display: inline-block;
position: relative;
width: 65.99%;
float:right;
}
.pic-large .dummy {
padding-top: 62%;
}
.pic-small {
display: inline-block;
position: relative;
width: 32.8%;
float:right;
}
.pic-small .dummy {
padding-top: 62%;
}
.v-spacer {
display: inline-block;
position: relative;
width: 1.2%;
float:right;
}
.v-spacer .dummy {
padding-top: 2535%;
}
.h-spacer {
display: inline-block;
position: relative;
width: 32.333333%;
float:right;
}
.h-spacer .dummy {
padding-top: 2.4%;
}
.pic-content {
position: absolute;
/*top: 0;*/
bottom: 0;
left: 0;
right: 0;
}
Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.
This is a sample of what my code looks like:
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="line"></div>
</div>
</div>
Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:
This is LEFT ---------------------------------------------------------
If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.
Hope I'm being clear.
Thanks,
Howie
Here's a sample of the real code I'm using. .line is really .inside-separator.
<div id="container-wrapper">
<div id="container">
<div class="left">This is LEFT</div>
<div class="inside-separator"><span class="inside-separator-left"> </span><span class="inside-separator-right"> </span></div>
</div>
</div>
.inside-separator
{
background: transparent url('../images/inside_separator.png') no-repeat center center;
margin: 0;
padding: 0;
height: 7px;
width: something?;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.
div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }
<div class="left"><div class="line">11111111111111111</div> This is LEFT</div>
Put the .line inside the .left and float .line right
http://jsfiddle.net/Hk7GR/1/
Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/
<div class="container-wrapper">
<div class="container">
<div class="left">This is LEFT</div>
<div class="inside-separator-wrapper">
<div class="inside-separator">
<span class="inside-separator-left"> </span>
<span class="inside-separator-right"> </span>
</div>
</div>
</div>
</div>
<style>
.container-wrapper
{
width: 500px;
height: 60px;
border: 1px solid green;
margin-bottom: 50px;
}
.container
{
display:table;
width:100%;
}
.left,
.inside-separator-wrapper
{
display:table-cell;
}
.left
{
border: 1px solid red;
white-space: nowrap;
padding: 0 15px;
}
.inside-separator-wrapper
{
width: 100%;
position: relative;
}
.inside-separator
{
background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
height: 7px;
position: relative;
top: 0px;
left: 0px;
padding: 0;
width: 100%;
}
.inside-separator-left,
.inside-separator-right
{
display: block;
position: absolute;
width: 8px;
height: 7px;
background: transparent url('http://test.2wsx.ws/inside_plus.png') no-repeat 0px 0px;
}
.inside-separator-left
{
float: left;
left: 0;
}
.inside-separator-right
{
float: right;
right: 0;
}
<style>