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
Related
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }
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 have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
I read many article about vertical alignment but how can I align 3 images horizontally from middle?
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
just do this it will work:
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture
{
display: inline;
}
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture {
display: inline-block;
}
and then put a wrapper div around the divs like so
<div id="image-wrapper">
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
</div>
and then do
#image-wrapper {
text-align: center;
}
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.