I wanted to add 2 image back to back with some gap in between, however my code below doesn't leave any gap, what should I add to leave a gap in between the images?
<div class="row">
<div class="column"><img style="float: left" src="https://static.wixstatic.com/media/e21362_745c8df449d844a38a92f64d4d1af4a4~mv2.png/v1/fill/w_200,h_55,al_c,usm_0.66_1.00_0.01/appstore.png" width="150" height="40"> </div>
<div class="column"> <img style="float: left" src="https://static.wixstatic.com/media/e21362_2712e9b89fa64756bc60b9e084624341~mv2.png/v1/fill/w_200,h_55,al_c,usm_0.66_1.00_0.01/playstore.png" width="150" height="40"></div>
</div>
Just incase anyone I looking for an answer for this; I manage to add the gap using the code below.
<div class="row"> <div class="column"><img style="float: left; padding-right: 10px; padding-bottom: 10px;" src="static.wixstatic.com/media/…" width="150" height="40"> </div> <div class="column"> <img style="float: left; padding-right: 10px; padding-bottom:10px;" src="static.wixstatic.com/media/…" width="150" height="40"></div> </div>
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
I have the following code:
<div class="container">
<div style="float: right; width: 50%;"> <img class="alignleft" src="http://idleslidegloves.com/wp-content/uploads/2016/01/instagram-22.png" alt="" /></div>
<div style="float: right; width: 60%;"><img class="alignright" src="http://idleslidegloves.com/wp-content/uploads/2016/01/facebook-7-22.png" alt="" /></div>
</div>
On the page it gets displayed like this:
This is how it gets displayed on my site.
What can I do to make the images appear next to one another and not interfere with the text that is a div=wrap.
Code can be seen here in idleslidegloves.com
Any idea on how to fix this is welcomed.
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}
I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my site to see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b>ts.clustermc.net</b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b>www.clustermc.net/forums
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)
This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>
It looks like your three 'well' divs are sitting in the middle of the page already?
As every thing is sitting in <div class="container"> that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
Note: It looks like you're missing a final ending </div> for the container class
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?
HTML CODE
<div class="header" style="float:left">
<div class="logo">
<img src="some image" height="200px" width="200px"/>
</div>
<div class="name">company name</div>
<div class="pic">
<img src="some image" height="200" width="200"/>
</div>
</div>
CSS styling
header{background-color:red;width:1200px;height:400px;float:;}
.logo{width:17%;}
.name{color:#ADFF2F;font-size:48pt;margin-left:250px;width:38%}
.pic{;margin-left:950px;}
.header > div {
float: left;
}
Also, your header class in the CSS needs to have a . in front of it.
You also need to remove the margin-left from .pic
http://jsfiddle.net/samliew/DAC7p