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;
}
Related
How do I put the image next to the h1 text? The image on the left and the text on the right. Thanks in advance!
img {
width: 150px;
height: 150px;
}
h1 {
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
It may be most efficient to use flexbox to resolve this layout issue. Adding
display: flex; to the parent element will create the row layout you're looking for and some additional CSS properties will center the children elements if desired. Check out the complete guide here to really control the position of every element if needed.
.head {
display: flex;
justify-content: center;
}
img {
width: 150px;
height: auto;
max-width: 100%;
}
h1 {
padding: 25px;
border: 0;
margin: 0;
align-self: center;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
</header>
Either add float: right to h1:
img {
width: 150px;
height: 150px;
}
h1 {
float: right;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
Or display: inline-block to h1:
img {
width: 150px;
height: 150px;
}
h1 {
display: inline-block;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}
<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
Keep in mind that the image has a fixed width and the text has a relative width, so it will automatically flow over to the next line if the total width allowance is exceeded. To prevent this, simply set width: fit content on the h1.
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav class='navbar'>
Home
About Us
Contact Us
Events
login
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<div id="column-center">
<header>
Column center
</header>
</div>
<div id="column-left">
<header>
Column left
</header>
</div>
<div class="column-right">
<header>
Column right
</header>
</div>
</div>
<div id="block_four">
<p> Block Four </p>
</div>
<div id="end_block">
<footer<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
Here is the css
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
}
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 7vh;
background-color: #3A3D3F;
position:fixed;
opacity: .90;
color: red;
vertical-align: middle;
}
div#static_nav a{
color: white;
text-decoration: none;
}
.navbar {
padding-right: 20px;
padding-top: 10px;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
div#block_two{
background-color: ;
padding-top: 10px;
height: 100vh;
background-image: url(sample_image.png);
background-size: cover;
}
div#block_three{
padding-top: 10px;
height: 100vh;
background-color: #FFFFFF;
padding-left: 10px;
}
These are the following columns I would like to line up in a row in the #block_three. I figured that 33% for the width would do the trick but one div column(column right) always gets pushed below the others.
div#column-left{
float: left;
width: 33%;
}
div#column-right{
float: right;
width: 33%;
}
div#column-center{
display: inline-block;
width: 33%;
}
div#block_four{
padding: 10px;
height: 100vh;
background-color: #FFFFFF;
}
div#end_block{
padding: 10px;
background-color: #3A3D3F;
height: 50vh;
}
Try to add these settings:
* {
box-sizing: border-box;
}
html {
margin: 0;
}
You have a padding-left of 10px on the block with the columns which is not calculated into the overall width, so this is probably the reason for your problem. The first of the rules above should hopefully fix that.
EDIT/ADDITION:
I just noticed you float settings on those colums - not good... ;-)
Change all of the them to float-left and change their order in the HTML code to "left/center/right" to simply float them from left to right (the inline-block won't work here)
div#column-left {
float: left;
width: 33%;
}
div#column-right {
float: left;
width: 33%;
}
div#column-center {
float: left;
width: 33%;
}
I'm having problems trying to take a piece of text, center it on the page, and have an image on the left and on the right of it.
Keep in mind, I'm only allowed to change CSS code for positioning. The HTML is completely right.
Here html code:
<div id="container">
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>
Our restaurant has the best barbecue that you can find at Philadelphia.
We have an amazing team just to serve you, your family, and your friends.
</p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>
And here is my CSS
#container {
width: 75%;
margin: 15px auto 15px auto;
}
* {
background-color: tan;
}
#pic_1 {
position: absolute;
display: inline-block;
float: left;
}
#pic_2 {
position: absolute;
display: inline-block;
float: right;
}
#aboutus {
position: relative;
text-align: center;
height: 275px;
width: 200px;
color: white;
display: inline-block;
left: 275px;
}
div {
border: solid 2px black;
}
The problem I am running into is that the first image is in the right spot, I'm just trying to get the 2nd image to go on the right side. For some reason, it's just not having it. The text is supposed to be centered.
Any help would be greatly appreciate it
I recommend you use flex instead of float, since float is really not meant for layout.
Stack snippet
#container {
width: 75%;
margin: 15px auto;
}
* {
background-color: tan;
}
#container > div:nth-child(2) {
display: flex;
}
#pic_1 {
flex: 1;
}
#pic_2 {
flex: 1;
}
#aboutus {
flex: 1 1 200px;
text-align: center;
height: 275px;
color: white;
}
div {
border: solid 2px black;
}
<div id="container">
<!-- ADD NEW CODE HERE... -->
<div>
<img src="../logo.png" id="header">
</div>
<div>
<img src="../barbecue01.jpg" id="pic_1">
<div id="aboutus">
<h1>About Us</h1>
<p>Our restaurant has the best barbecue that you can find at Philadelphia. We have an amazing team just to serve you, your family, and your friends. </p>
<h1>Try It Now!</h1>
</div>
<img src="../barbecue02.jpg" id="pic_2">
</div>
</div>
Make them display block and float left
#pic_1 {
display: block;
float: left;
width: 33%;
}
#pic_2 {
display: block;
float: left;
width: 33%;
}
#aboutus {
text-align: center;
display: block;
float: left;
width: 33%;
}
I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.
Here is my code:
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}
.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}
.third img {
float: left;
position: relative;
}
And my html:
<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>
Help please!
I can't comment yet…
Your original code on fiddle
The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:
The modified version (without padding) on fiddle
Now it's not "pulled too far on the left".
What you can do instead, is to add margin:25px; to .third class, like this:
The modified version (with margin) on fiddle
EDIT: A CLEAN REVISITED VERSION:
The HTML code:
<div class="grid">
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/nemo/350/200/1" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/futurama/350/200/6" />
</div>
</article>
<article class="home">
<div class="third">
<img src="http://lorempicsum.com/up/350/200/6" />
</div>
</article>
</div>
The CSS code:
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
}
.third {
display:table-cell;
height: 150px;
width: 150px;
padding: 25px;
border-radius:25px;
vertical-align:middle;
background-color:#eee; //added just for test display
}
.third img {
border:none;
width: 100%;
height: auto;
}
The result here on fiddle.
Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.
Please use the updated code I think it will work.
div {
display: block;
}
.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.third {
display:block;
border-radius: 25px;
}
.third img {
width:100%;
height:auto;
}
Here's a possible correction of your code to you :
See this fiddle
I've changed a little the HTML structure like this :
<section class="home">
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
<article class="third">
<img src="http://lorempicsum.com/futurama/350/200/1" />
</article>
</section>
It's better for semantic to have section around article and not article around article.
I've simplify the CSS code like this :
section.home {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}
article.third {
text-align: center;
float: left;
width: 150px;
position: relative;
padding: 25px;
overflow: hidden;
}
.third img {
border-radius: 25px;
width: 100%;
position: relative;
}
If you use fluid width for container, then use fluid width for padding/margin of article.
In that case, i use fixed width of the container and for padding values.
Background-color is not fully filling the div ( I want to color the div between the navbar and the footer), the background color is only reaching maybe half of the page, is not filling all the way down till the end of the container.
So I hope you guys can help out on getting to the source of the issue, cause I have no idea what could be causing the problem :/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>FunPic - Share your pictures</title>
</head>
<body>
<div class="container">
<div id="header">
<div id="navtext">
<p>FunPic - Share your pictures</p>
</div>
<div id="menu">
<ul id="navbar">
<li>Inicio</li>
<li>Subir Foto</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
<div id="content">
<div id="image"><img src="images/pic.jpg"></div>
</div>
</div>
</div>
<div id="footer">©Fun Pic 2015 - Costa Rica</div>
</body>
</html>
Here's the CSS:
{
max-width: 1024px;
color: red;
margin: auto;
}
html, body {
width: 100%;
margin: 0 auto;
height: 100%;
}
.container {
margin: 0 auto;
width: 100%;
background-color: #E8E8E8;
height: 100%;
}
#header {
margin-bottom: 30;
width: 100%;
height: 50px;
float: left;
background: #8AE6B8;
}
#navtext {
padding: 14;
width: 40%;
float: left;
}
#navtext p {
margin-left: 40%;
}
#menu {
padding: 14;
width: 40%;
float: left;
}
#navbar {
margin-left: 65px;
width: 100%;
float: left;
}
#navbar li {
list-style: none;
margin-right: 10;
display: inline-block;
}
#wrapper {
margin: 30;
width: 100%;
float: left;
}
#content {
margin: 0 auto;
width: 40%;
height: 600px;
display: block;
}
#image {
width: 100%;
margin: 0 auto;
}
#image img {
width: 100%;
}
#footer {
margin: auto;
width: 100%;
height: 50px;
text-align: center;
background-color: #202020;
clear: both;
}
Do it like this
#wrapper {
background-color: #E8E8E8;
}
change #E8E8E8 to any color you want. This will only set the background-color property of your div between navbar and footer divs.
I got it, i noticed i was coloring the CONTAINER instead of the WRAPPER..! ugh... i feel so dumb...