I am trying to create three separate rounded images on the same line. I managed to get two in the correct position but I can't get the last one to move up into the correct line.
.wrap {
width: 100%;
}
.image-left {
content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: 250px;
float: left;
padding-left: 10%;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
height: 250px;
margin-left: auto;
margin-right: auto;
}
.image-right {
content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: 250px;
float: right;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
There's probably a better way to do this, but here's one that works: https://jsfiddle.net/5ybLh6vy/
<div class="wrap">
<div class="image-left">
<img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
</div>
<div class="image-centre">
<img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
</div>
<div class="image-right">
<img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
</div>
</div>
.wrap {
width: 100%;
display: table;
}
.wrap img {
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.image-left, .image-centre, .image-right {
display: table-cell;
width: 33%;
}
How about using the image tag and wrapping them around a div like this?
.wrap {
width: 100%;
}
.image-wrapper{
width: 33%;
display: inline-block;
text-align: center;
}
.image-wrapper>img{
height:250px;
}
<div class="wrap">
<div class="image-wrapper">
<img src='https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png'>
</div>
<div class="image-wrapper">
<img src='https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png'>
</div>
<div class="image-wrapper">
<img src='https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png'>
</div>
</div>
Float all three of the divs right, make them width: 33.33% and box-sizing: border-box.
This will make three evenly spaced images floated inline.
If you want them all in a neat row you'll have to add float:left; to all of them and or to the .wrap class but you would have to add display:inline; to each image which I think is the best solution. Problem is if the the viewport isn't wide enough it will push to the next line.
.wrap {
width: 100%;
float: left;
}
.image-left {
content:url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
height: auto;
max-width: 25%;
padding-left: 10%;
display:inline;
}
.image-centre {
content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
max-width: 25%;
height:auto;
display:inline;
}
.image-right {
content:url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
height: auto;
max-width: 25%;
display:inline;
padding-right: 10%;
}
<div class="wrap">
<div class="image-left"></div>
<div class="image-centre"></div>
<div class="image-right"></div>
</div>
You could assign float: left; for all of your images, and then set correct margins.
Related
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I have a portfolio website and I'm trying to align the pictures in the center of the page. I've tried
text-align
and
margin
but nothing seems to work. The code and CSS are as follows:
<div class="body">
<div class=responsive>
<div class=image>
<img class="gallery" src="../pics/placeholder.png">
<p></p>
</div>
</div>
and
.body {
text-align: center;
padding-top: 20px;
float: left;
}
.responsive {
padding: 5px;
float: left
}
.gallery {
width: 250px;
height: 250px;
}
Remove float:left from .responsive and add width:100% to .body
Then you don't need float on .body also.
But it all depends how you want to design your page.
Right now the float: left without the set width is messing up your ability to center things.
Are you looking for something like this?
.body {
padding-top: 20px;
float: left;
width: 100%;
}
.responsive {
padding: 5px;
float: left;
width: 100%;
}
.image {
margin: 0 auto;
width: 250px;
}
.gallery {
width: 100%;
height: auto;
}
<div class="body">
<div class="responsive">
<div class="image">
<img class="gallery" src="https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg">
<p></p>
</div>
</div>
</div>
I have the following problem on a website i am building:
3 columns of equal height and 1/3 width but on the last column there is a small white gap on the right hand side. I cant figure out why, here is what I'm talking about:
enter image description here
See the white line by the right hand side of the blog image.
The code I'm am using for the 1/3rd column is:
.thirdBox {
float: left;
width: 33.33%;
width: calc(100% / 3);
padding: 20px 40px;
box-sizing: border-box;
min-height: 400px;
display: table;
}
and the background images:
.thirdBox:nth-of-type(3) {
background: url("imagelinkhere...") no-repeat 50% 50%;
background-size: cover;
}
The issue is that 100%/3 is 33.33% in most browsers, not quite the exact width you want it to be.
Instead of using calc() to find each table's width, I would use display:flex; on the parent of all three elements you want to be in one row.
This is the best I can help you with without any HTML structure. Please post that and I may be able to help you more.
.parentElement{
display:flex;
}
.firstBox, .secondBox, .thirdBox {
padding: 20px 40px;
flex:1;
}
.firstBox{
background:blue;
}
.secondBox{
background:red;
}
.thirdBox{
background:green;
}
<div class="parentElement">
<div class="firstBox"></div>
<div class="secondBox"></div>
<div class="thirdBox"></div>
</div>
Here is a solution using display: table:
<div class="row">
<div class="col">
<div class="col-inner">
<span>Menu</span>
</div>
</div>
<div class="col">
<div class="col-inner">
<p>Some text here</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<span>Blog</span>
</div>
</div>
</div>
Css:
.row {
background-color: #999;
}
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 33.33%;
min-height: 400px;
}
.col-inner {
display: table;
width: 100%;
min-height: 400px;
box-sizing: border-box;
padding: 20px 40px;
}
.col:first-child,
.col:last-child {
background-color: yellow;
}
.col-inner span,
.col-inner p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I have following html code
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
</div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
And css
#main {
width: 230px
}
#content {
float: left;
width: 150px;
}
#right {
float: right;
width: 80px;
}
#right h2 {
margin-top: 1em;
}
I want Right title to be aligned with top of red square. The problem is that Title text can be long and text will be placed on two lines.
Can I achieve this using only css?
http://jsfiddle.net/6Rpkh/312/
I change CSS and structure of html, i put div #right,#right1 into the content and set margin-top negative
CSS
#content, #content1 {
float: left;
width: 185px;
}
#right, #right1 {
float: right;
width: 80px;
margin-top:-105px;
}
#right h2, #right1 h2 {
margin-top: 0em;
}
HTML
<div id="main">
<div id="content">
<h1>Title text</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right">
<h2>Right title</h2>
</div>
</div>
</div>
<br style="clear: both"><br><br>
<div id="main1">
<div id="content1">
<h1>Very long title text on two lines</h1>
<div style="width: 100px; height: 100px; background: red"></div>
<div id="right1">
<h2>Right title</h2>
</div>
</div>
</div>
http://jsfiddle.net/6Rpkh/313/
maybe remake the structure to have 3 sections: header, left and content, instead of left and content only:
http://jsfiddle.net/78Lczwoq/
.square {
float: left;
background: red;
width: 100px;
height: 100px;
}
.header {
margin-bottom: 20px;
}
.media {
margin: 20px;
padding: 20px;
border: solid 1px #ccc;
overflow: hidden;
}
.left {
float: left;
}
.content {
overflow: hidden;
padding-left: 10px;
}
You actually need to modify your html. Check the below fiddle:
#main, #main1 {
width: 230px
}
#content, #content1 {
width: 150px;
}
#right, #right1 {
float: right;
width: 80px;
}
#right h2, #right1 h2, .box {
display: inline-block;
vertical-align: top;
}
Working Fiddle
Here is the code that works perfect as per you requirement.
HTML
<div id="main">
<div id="inner_container">
<p class="top_title">Some long title here it automatically adjusts</p>
<div class="sq_box">
</div>
<div class="right_title">
hello
</div>
</div>
</div>
CSS
#main{
width:400px;
height:200px;
}
#inner_container{
width:100%;
height:auto;
}
p.top_title{
width: 100px;
word-wrap: break-word;
}
.sq_box{
width:100px;
float:left;
height:100px;
background-color:red;
}
.right_title{
float:left;
margin-left:10%;
}
JSFILDLE demo
This adjusts itself no need to care about any margin.. its robust ..
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.