I can't seem to get the two images of class 'social' side-by-side, central to the column of class 'col-sm-4'. Instead they stack as the screen size decreases. Any ideas how I can do this responsively?
HTML
<div class="container-fluid">
<div class="row" style="border-top: 0">
<!-- Profile info -->
<div class="col-sm-4 col-sm-offset-4">
<img class="img-circle img-responsive" src="images/callum.jpg">
<h1 class="text-center" style="color: #3FA2B2">Callum Messiter</h1>
<p class="text-center">100-trillion cells and 100-billion neurons defying the 1 in 10<sup>2,685,000</sup> chance of me existing.</p>
<img class="social" src="images/twitter.png">
<img class="social" src="images/github.png">
</div>
</div>
</div>
CSS
.row{
border-top: 1px solid #808080;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.col-sm-4{
height: 450px;
}
.img-circle{
height: 200px;
width: 200px;
margin: 0 auto;
position: relative;
top: 40px;
border: 2px solid white;
}
.text-center{
font-family: helvetica;
color: white;
position: relative;
top: 50px;
}
span{
font-weight: bold;
background-color: #e6e6e6;
color: #3FA2B2;
padding: 3px 7px 3px 7px;
}
.social{
height: 50px;
width: 50px;
margin: 0 auto;
}
Add class text-center before img. like this
<div class="text-center">
<img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
<img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
</div>
DEMO HERE https://jsfiddle.net/ff9g43t8/
Try:
.social {
display: inline-block;
}
Related
Want to create a slider containing 3 image containers and need all of them in the same row. All image containers are same size, but the size of slider is around 2.5 images, so the third one should overflow instead of going to new row. Example:
How it should look
What i have for now
html
<div class="image-slide-wrapper">
<div class="images-section">
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
<div class="image-slide">
<div class="slide-img">
</div>
</div>
</div>
</div>
scss
.image-slide-wrapper {
float: left;
height: 55%;
width: 100%;
.images-section {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
}
.image-slide {
float: left;
height: 100%;
width: 100px;
margin-right: 0.25rem;
.slide-img {
float: left;
height: 100%;
width: 100%;
border-radius: 0.35rem;
background-color: #e9e9e9;
in the text slider is images-section class and image container is image-slide class. Forgot to mention that I have to go with float to make consistent with the rest of the code.
<div style="overflow: hidden; width: 250px;">
<div style="width: max-content">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
<img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
</div>
</div>
You could remove float from the thumb elements and use display: flex and flex-flow: row nowrap on the container
.container {
height: 100px;
width: 250px;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display: flex;
flex-flow: row nowrap;
}
.image-slide {
height: calc(100% - .25rem);
flex: 1 0 100px;
margin-right: 0.25rem;
border: 1px #ccc solid;
}
<div class="container">
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
<div class="image-slide"></div>
</div>
This works. You can add display:flex; and flex-wrap:nowrap; to .image-slide-wrapper class.
.main {
float: left;
height: 85%;
width: 100%;
border: 1px solid grey;
border-radius: 8px;
overflow: hidden;
padding: 0.125rem;
display:flex;
flex-wrap:nowrap;
}
.slider {
float: left;
height: 100%;
width: 300px;
margin-right: 0.25rem;
display: block;
}
<div class="main">
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
<div class="slider">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
</div>
</div>
How do I add a square onto a border between a div and an image? The square will be position on the left or the right depending on the position of the text (if the text is aligned right, the square will be bottom left; if the text is aligned left, the square will be top right).
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder {
border-bottom: 5px solid #000;
}
.topborder {
border-top: 5px solid #000;
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
You can achieve this using pseudoelements.
You can adjust the position as you need. I've used calc() here to take into account the width of the border.
.item {
flex: 1;
background: #8d0700;
margin-left: 5px;
margin-right: 5px;
padding: 0px;
width: 250px;
border: 5px solid #000;
}
.image img {
width: auto;
height: 450px;
outline: 2px solid rgba(218, 236, 255, 0.6);
outline-offset: -6px;
}
.name {
height: 100px;
text-overflow: wrap;
background-color: #8d0700;
color: #fff;
}
.bottomborder:after,
.topborder:before {
content: '';
width: 3em;
height: 3em;
background: black;
transform: rotate(45deg);
position: absolute;
}
.bottomborder {
border-bottom: 5px solid #000;
position: relative;
}
.bottomborder:after {
left: 3em;
bottom: calc(-1.5em - 3px);
}
.topborder {
border-top: 5px solid #000;
position: relative;
}
.topborder:before {
right: 3em;
top: calc(-1.5em - 3px);
}
.name .left {
padding-left: 10px;
}
.name .right {
float: right;
margin-right: 10px;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-container w3-row-padding indexcontainer">
<div class="items">
<div class="w3-col l3 item">
<div class="name bottomborder">
<h3 class="right">Die Casting and Machining</h3>
</div>
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
<div class="w3-col l3 item">
<div class="image">
<img src="http://via.placeholder.com/200x200">
</div>
<div class="name topborder">
<h3 class="left">Plastic Injection Products</h3>
</div>
</div>
</div>
</div>
I am trying to create 3 div's inside parent, but no luck to any attempt i was made.. (that's what i am getting http://prnt.sc/bytx6l)
The idea is to create 3 div's 33% height (i dont want to use height by 137 pixels each).
The second is to have absolute centered any content inside 3 div's.
(that's what i want http://prnt.sc/bytzu1)
PS. I dont want to use just divs
What i am doing wrong? Any help?
body {background-color: #111;margin-left: 0px;margin-right: 0px;margin-bottom: 0px; color: #ffffff;}
#tbl {display: table; width:100%; margin-top:-4px;}
#row {display: table-row; width:100%;}
.title {font-weight:400; font-size: 170%; color:#ebebeb;}
#a {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
width:170px; text-align: center; }
#a-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#a-left {height: 100%; width:100%; display:block; background-color: rgba(31,30,30,1);}
#empty {display: table-cell; background-color: #3a3a39; width:10px; text-align: center; }
#b {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
width:170px; text-align: center; }
#b-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
#b-left {height: 100%; width:100% ;display:block; background-color: rgba(31,30,30,1);}
.j-left {border:1px solid #dc6210; margin:-1px 4px -1px -4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.j-right {border:1px solid #dc6210; margin-right:2px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
#spacer {display: table-row; height: 6px;}
#block {width:100%; height: 33% /*137px*/;}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
Because #a-choose and #a-left is relative position (by default), height: 33% of #block can not be calculated.
So, you should add style position: absolute to #a-left and position: relative to #a-choose.
This will be helpful.
body {
background-color: #111;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #ffffff;
}
#tbl {
display: table;
width: 100%;
margin-top: -4px;
}
#row {
display: table-row;
width: 100%;
}
.title {
font-weight: 400;
font-size: 170%;
color: #ebebeb;
}
#a {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
width: 170px;
text-align: center;
}
#a-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#a-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
#empty {
display: table-cell;
background-color: #3a3a39;
width: 10px;
text-align: center;
}
#b {
display: table-cell;
background-color: #3a3a39;
padding: 0px 0px 0px 6px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
width: 170px;
text-align: center;
}
#b-choose {
display: table-cell;
background-color: #3a3a39;
text-align: center;
width: 40%;
position: relative;
}
#b-left {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: rgba(31, 30, 30, 1);
}
.j-left {
border: 1px solid #dc6210;
margin: -1px 4px -1px -4px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.j-right {
border: 1px solid #dc6210;
margin-right: 2px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#spacer {
display: table-row;
height: 6px;
}
#block {
width: 100%;
height: 33% /*137px*/;
}
<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
<div id="tbl">
<div id="spacer"></div>
<div id="row">
<div id="a" class="title">1</div>
<div id="a-choose">
</div>
<div id="empty"></div>
<div id="b-choose">
</div>
<div id="b" class="title">2</div>
</div>
<div id="spacer"></div>
<div id="row">
<div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
<div id="a-choose" style="border:1px solid #dc6210;">
<div id="a-left">
<div id="block" style="">a</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
<div id="block" style="">a</div>
</div>
</div>
<div id="empty" style="background-color: transparent;"> </div>
<div id="b-choose" style="border:1px solid #dc6210;">
<div id="b-left">
<div id="block" style="">b</div>
<div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
<div id="block" style="">b</div>
</div>
</div>
<div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
</div>
<div id="spacer"></div>
</div>
</div>
height is relative. Therefore all elements above it must also have a height element in them.
a-left
a-choose
row
tbl
Once you have a height: 100%; in all of these it works.
<html>
<head>
<title>Pixafy</title>
<style>
html {
background: url(wp.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.wp.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp.jpg', sizingMethod='scale')";
padding-top: 50px;
}
#ldiv {
vertical-align: top;
height: 120px;
width: 40%;
color:#ccc;
float: left;
position: relative;
border: 1px solid yellow;
}
#rdiv {
vertical-align: top;
float: left;
width: 40%;
border: 1px solid blue;
height: 120px;
}
#ctr {
vertical-align: middle;
width: 80%;
height: 150px;
border: 1px solid white;
background:url(mid.png) no-repeat center center;
}
#container1 {
vertical align: top;
width: 80%;
height: 300px;
border: 1px solid green;
background-color: #E3E3E3;
}
#container2 {
vertical align: top;
width: 80%;
height: 250px;
border: 1px solid green;
background-color: #000000;
}
#text1 {
align: left;
width: 80%;
color: #000000;
font-family: Arial, Vedana, Tahoma;
font-size: 24px;
font-weight: bold;
}
#space {
height: 25px;
border: 1px solid purple;
width: 80%;
}
ul {
list-style-type: none;
height: 80px;
width: 500px;
margin: auto;
}
li {
float: left;
}
ul a {
background-color: #29281E;
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
padding-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
display: block;
line-height: 22px;
text-decoration: none;
font-weight: bold;
font-family: Verdana, "Times New Roman", Times, serif;
font-size: 14px;
color: #D6D7D8;
}
.clear-both {
clear: both;
}
#text2 {
width: 70%;
border: 1px solid #00CCFF;
color: #000000;
font-size: 16px;
font-family: Arial, Verdana, Tahoma;
font-weight: bold;
}
#btn {
width 10%;
border: 1px solid #FFCC00;
vertical-align:bottom;
}
.btnlearn {
clear:both;
width:125px;
height:40px;
background:#E55D22;
text-align:center;
line-height:40px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
cursor: pointer;
}
.btnlearn:hover {
text-decoration: underline;
cursor: pointer;
}
#rcw {
width: 80%;
color: #BAB8B8;
font-size: 18px;
font-size: Arial, Verdana, Tahoma;
}
#left
{
width: 33%;
float: left;
border: 1px solid yellow;
display: inline-block;
height: 250px;
}
#right
{
width: 33%;
float: left;
border: 1px solid white;
display: inline-block;
height: 250px;
}
#mid
{
width:33%;
float: left;
border: 1px solid red;
display: inline-block;
height: 250px;
}
</style>
</head>
<body>
<div width=100% style="margin: 0 auto;">
<div id="ldiv"><img src="pixafy.png" style="position: absolute; left: 0px;" /></div>
<div id="rdiv">
<ul>
<li>Home</li>
<li>Services</li>
<li>Works</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="clear-both"></div>
<div id="ctr"></div>
<div class="clear-both"></div>
<div id="space"></div>
<div class="clear-both"></div>
<div id="container1" style="position: relative;">
<div id="text1" style="position: absolute; left: 25px; top: 15px;">We are a company of experts developer based in New York City.<br>Partner with us to achieve your business goals through technology.</div>
<div class="clear-both"></div>
<div id="text2" style="position: absolute; left: 25px; top: 85px; overflow: auto">Our talented and experienced team has over 10 years of experience developing world-class websites and applications, and we leverage the latest technologies, content management solutions, open source platforms and web standards to solve any challenge.</div>
<div id="btn" style="position: absolute; right: 45px; top: 100px;"><input type=button class=btnlearn value="Learn More" /></div>
<div class="clear-both"></div>
<div id="rcw" style="position: absolute; left: 25px; top: 175px;">Recent Work</div>
<img src="1.png" style="position: absolute; left: 150px; bottom: 0px;" />
<img src="2.png" style="position: absolute; left: 400px; bottom: 0px;" />
<img src="3.png" style="position: absolute; left: 650px; bottom: 0px;" />
</div>
<div class="clear-both"></div>
<div id="container2" style="position: relative;">
<div id=left stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</span>
<div class="clear-both"></div>
<img src="wd.png" style="position: relative; left: 25px; top: 40px;" />
<span style="position: relative; width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</span>
</div>
<div id=right stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</span>
</div>
<div id=mid stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</span>
</div>
</div>
</div>
</body>
</html>
Outpost
I want to wrap it so I can have the similar contents in the next two DIV as well.
Not sure why is there a tab on the first line and giving me this issue.
Can someone tell me why is it going over to the next DIV?
Please help me resolve this issue.
I would like to make it look like this:
I'm giving you an answer but request you to learn about Semantic HTML and CSS Positioning. That'd help you out a lot.
Now, as far as this example is concerned, you're over-using CSS Positioning. KISS principle states that the html should be very simple and easy to style. Yours is but is not semantic. I've made it semantic and have then added correct styles to mimic what you want.
New screenshot:
JS Fiddle Demo: http://jsfiddle.net/q9Rvq/3/
Added CSS:
#container2 > div h5{
text-align:center;
margin:5px 0px;
}
#container2 > div img{
float:left;
margin-left:20px;
}
#container2 > div p{
margin-left:55px;
margin-right:10px;
margin-top:0px;
width:auto;
}
Edited HTML:
<div id="container2" style="position: relative;">
<div id=left stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=right stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=mid stlye="">
<h5 style="color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
</div>
The content is overflowing because the element is relatively positioned. As some people have commented you should try not to use too much positioning as it will hinder you from creating layouts that reflow. You could also apply a width to the element to wrap the text.
The HTML for the picture you show should look like this:
<div>
<h3>eCommerce Solutions</h3>
<img alt="" src="">
<p>Our team will...</p>
Learn More
</div>
Css could look like this:
div {
width: 300px;
height: 200px;
background-color: #000;
color: #fff;
padding: 20px;
}
div img {
float: left;
margin: 0 10px 10px 0;
}
div a {
float: right;
}
Fiddle: http://jsfiddle.net/LM5MZ/3/
In this jsFiddle (don't mind the broken images...) I've only made a slight tweak to the style attribute of the <span/> tag holding the text which is overflowing. I replaced position: relative; width: 25%; top: 40px; with margin: 40px 5px 5px 80px;display: inline-block; The display: inline-block tells the browser to render the element with a box model which is required for the margin: 40px 5px 5px 80px attribute to be respected. This keeps the content within its containing parent <div/> tag.
However, it's still overflowing the bottom, probably because of the absolute positioning. If you wanted it to scroll, you could apply overflow: auto to that <div/> but I don't think that's the look you're going for.
This is the span tag you have which is holding the text that is bleeding over:
<span style="position:relative;width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">
The div, called #left, has a style which sets
width:33%
so it is a fixed width. the "left:80px" in your span style is forcing the text outside of the fixed width left div. So, just move it to the right, try left: 0px instead.
The problem is the misuse of position. It's better in this case to use padding.
Here is some tidy html taking use of css, padding and a little floating:
HTML
<div id="BoxContainers">
<div class="boxes left">
<div class="innerBox">
<div class="title">Website Development</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
Learn More
</div>
</div>
</div>
<div class="boxes right">
<div class="innerBox">
<div class="title">eCommerce Solutions</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
Learn More
</div>
</div>
</div>
<div class="boxes centre">
<div class="innerBox">
<div class="title">Mobile Phone Applications</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
Learn More
</div>
</div>
</div>
</div>
CSS
#BoxContainers {
height: 250px;
border: 1px solid green;
color: #ffffff;
background: #000000;
position: relative;
}
.boxes {
width: 33%;
float: left;
height: 250px;
}
.boxes.left {
border: 1px solid yellow;
}
.boxes.right {
border: 1px solid white;
}
.boxes.mid {
border: 1px solid red;
}
.boxes .innerBox {
padding: 25px;
}
.boxes .title {
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
}
.boxes img {
float: left;
}
.boxes .content {
padding-left: 55px;
}
.boxes .content p {
margin-top: 0;
}
Demo
Take note, there is no inline styling. Avoid using inline styling, even for mocking something up quickly. If you are using css properly, it will be quicker putting your css in a stylesheet and using classes to reuse your styles.
Im having this:
http://jsfiddle.net/h2rsJ/2/
And i want it to be like this:
http://i53.tinypic.com/2u7rf48.png
So that all are vertical align with eachother, the "news" is in the middle and stars on the right and the 3 images on the left.
How can i do that? Help im stuck..
http://jsfiddle.net/h2rsJ/9/
I'd strongly recommend breaking all of the styling out of the html and putting it in the external style sheet.
I managed to do it this way. Change your CSS:
.iconFavorite{
background: url(http://www.penrithstar.com.au/images/icon_star.gif) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
#discoLEvents{
display: inline-block; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; height: 40px; }
p{
line-height: 40px; display: block; float: left; text-align: center; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center;
}
img{
float: left;
}
#stars{
float: right; line-height: 40px;
}
And then your HTML too:
<div id="discoActions" style="border: 1px solid red;">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<p>NEWS</p>
<div id="stars">
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
</div>
</div>