I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.
What I am aiming for is something like this:
I've tried to put a div (that encompasses the 3 other divs) below the main title div.
I've tried this CSS:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
Here is a JSFiddle of what I've got so far: http://jsfiddle.net/4zx9gxgL/
Any suggestions/ideas?
You can use display:table-row and display:table-cell to make it work similar to a table.
For example:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
display: table-row;
}
.content-info div {
width:300px;
padding:25px;
margin: 25px;
display: table-cell;
}
And you can remove the .one{}, .two{}, .three{} in your css
There are several ways to go about this. CSS table, float and position offer three possible solutions. Depending on your overall objectives, here's a solution featuring inline-block (no table, no float, no position). This solution is very simple, stable, responsive, and easy-to-customize.
DEMO: http://jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
UPDATE
I've updated your fiddle demo, as well.
http://jsfiddle.net/4zx9gxgL/33/
so you want to put all thre divs side by side. i think it's that .
.main-content {
text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;
}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
}
.yo{
display: inline-block;
width: 33%;
margin-right: -2px;
text-align:center;
}
https://jsfiddle.net/4zx9gxgL/30/
I had a go aswell ...
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
.yx {
text-align: center;
}
.main-content {
text-align: center;
font-family: 'Montserrat', sans-serif;
display: block;
position: relative;
top: 20%;
left: 50%;
margin-top: 100px;
height: auto;
margin-bottom: -100px;
/* bring your own prefixes*/
transform: translate(-50%, -50%);
}
.main-content h1 {
font-size: 62px;
}
.main-content h2 {
font-size: 32px;
}
.content-info {
text-align: center;
font-family: 'Montserrat', sans-serif;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.content-info div {
width: 300px;
padding: 25px;
margin: 25px;
}
.one {
display: inline-block;
max-width: 33%;
}
.two {
display: inline-block;
max-width: 33%;
}
.three {
display: inline-block;
max-width: 33%;
}
<body>
<div class="main-content yx">
<h1>Name Here</h1>
<h2>Hi, I'm Name.</h2>
</div>
<div class="content-info">
<div class="one">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="two">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="three">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
</div>
<footer></footer>
</body>
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
float:left;
width:100%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
float:left;
}
If the 3 bottom divs don't align correctly remove the margin settings, or adjust accordingly.
Related
Edit: I realized what I asked was very vague. I;m trying to move a paragraph to the right-center of the site. It is a landing page that I am trying to make, I am not sure what's causing the paragraph block to not move from its original spot. Below is the HTMl/CSS that I am using.
I've tried using margins, float, text-align
#test {
background-color: #000;
background: url(https://res.cloudinary.com/dod6u4bjy/image/upload/v1557191977/matteo-kutufa-1135337-unsplash.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
}
#testnav {
margin: 50px 220px;
list-style: none;
}
#wrapper {
margin: 165px 50px;
}
#testnav a:hover {
text-decoration: underline;
}
#testnav a {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
width: 100px;
}
li {
margin: 4px 0;
}
#socialnav li{
display:inline;
color: pink;
}
#socialwrap {
margin: 0 220px;
}
#socialwrap a:hover{
opacity: 0.7;
color: pink;
}
#logo {
margin-left: auto;
margin-right: auto;
width: 100px;
height: 100px;
}
.paragraph{
border: solid black 1px;
color: pink;
font-size: 24px;
text-align: center;
width:100%;
}
#intro {
border: solid red 1px;
display: inline-block;
width: 80%;
}
</style>
<body id="test">
<div id="wrapper">
<img src="https://res.cloudinary.com/dod6u4bjy/image/upload/v1557197589/geisha.png" id="logo" alt="">
<ul id="testnav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="socialwrap">
<ul id="socialnav">
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<div class="paragraph">
<div id="intro">This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</div>
</div>
</body>
</html>
It is unclear what you mean by "at the top", but the following will center your text in the middle. To do this you need to set the inner block both have a width and set it to display as inline-block. Then set the outer div to have text-align of center.
.paragraph{
border: solid black 1px;
color: pink;
font-size: 24px;
text-align: center;
width:100%;
}
#intro {
border: solid red 1px;
display: inline-block;
width: 80%;
}
<div class="paragraph">
<div id="intro">This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</div>
</div>
Note: When dealing with alignment it is often good to use a border to test where the blocks actually start and end. I have put a sample border in the above code. You can adjust the code and then remove the border when you are happy with it.
I have used the flexbox method to make the paragraph top center. Try the demo.
.paragraph {
Color: pink;
font-size: 24px;
margin: 0 auto;
width:100%;
display: flex;
flex-wrap: wrap;
}
.paragraph p {
align-items: center;
}
<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
Center Center aligned paragraph below snippet.
.paragraph {
Color: pink;
font-size: 24px;
display: flex;
flex-wrap: wrap;
height:500px; /*optional */
}
.paragraph p {
align-self: center;
text-align: center;
display: block;
width: 100%;
}
<div class="paragraph">
<p>This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
Your problem is unclear. If you want the text at the top right try this:
.paragraph{
Color: pink;
font-size: 24px;
position:absolute;
top:0;
right:0;
}
<div class="paragraph">
<p >This is a new website concept dedicated to my love the Japanese culture. <br>I hop to bring this idea to the masses.</p>
</div>
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I am creating a web page with 2 <div>s side by side. Each <div> will have 2 sections.
I want to center them (bring them to the middle of the <div>). I am trying to make this <div> responsive. In the website, 2 <div>s will be in one line, while in mobile one <div> will appear on one line and the other <div> will appear on a second line. I am trying to center the image and text of each section.
How can I accomplish that?
.wrapper {
width: 100%;
overflow: hidden;
}
.wrapper div {
min-height: 45px;
padding: 1px;
}
#one {
background-color: gray;
float: left;
width: 50%;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<div class="wrapper">
<div id="one">
<img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
<p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE DELIVERY </strong>ORDERS OVER $100</p>
</div>
<div id="two">
<img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
<p style="font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
My fiddle: https://jsfiddle.net/4okxw32v/
First of all, the use of floats in layout design is discouraged. It is generally not a good way of doing things, and usually if you're having a layout issue it comes down to a float problem. Instead you should use the display: inline-block setting. When using inline-block there are a couple of things to take into consideration.
Any white space between elements will be shown. To combat this you can set font-size: 0 on the wrapper and then set font-size: 1rem on the children. This will set the font size in the content to the same size as that of the html selector.
You can prevent line-breaking if you set white-space: nowrap on the parent and then set white-space: initial on the children.
Next instead of adding an image and floating it inside the child you can use the css pseudo element ::before (or css2 :before) on the text container inside the element.
Finally to center the contents use text-align: center on the parent
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
padding: 0px;
margin: 0px;
}
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: 1rem;
min-height: 45px;
padding: 1px;
text-align: center;
font-size: 13px;
color: #fff;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
display: inline-block;
width: 50%;
}
#one {
background-color: gray;
}
#one p:before {
content: "";
display: inline-block;
width: 4em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#two p:before {
content: "";
display: inline-block;
width: 2.5em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/free-gift.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#media screen and (max-width: 620px) {
.wrapper div {
width: 100%;
}
}
<div class="wrapper">
<div id="one">
<p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
</div>
<div id="two">
<p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
Just wanna ask for your help regarding my markup, I am trying to do exactly the same like this image:
http://prntscr.com/6wrpr3
Here's my markup:
<div id="two-box">
<div class="wrapper clearfix">
<div class="column blue">
<div id="circle">
<div id="content">
<h2>PARALLAX</h2>
<h1>Text</h1>
<h2>ARE COOL!</h2>
</div>
</div>
</div>
<div class="column red">
<div id="circle-red">
<h2>LET IT</h2>
<h1>Fade</h1>
<h2>RIGHT NOW!</h2>
</div>
</div>
</div>
</div>
<div id="carport">
<div class="wrapper clearfix">
<div id="starynight"></div>
<div id="car"></div>
<div id="road"></div>
</div>
</div>
ANd now for my CSS:
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 1140px;
}
.two-box{
width: 100%;
}
.column{
width: 50%;
position: relative;
padding: 40px 0;
}
.blue{
background-color: #3498db;
float: left;
}
.red{
background-color: #e74c3c;
float: right;
}
#content{
margin-top: 150px;
}
.column h2{
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 3.5em;
font-weight: 300;
line-height: 1em;
text-align: center;
margin: 0;
}
.column h1{
color: #fff;
font-family: 'Pacifico', sans-serif;
font-size: 4.2em;
line-height: 0em;
text-align: center;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
padding: 40px;
margin: 0;
}
#circle{
background-color: #3aa3e9;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#circle-red{
background-color: #f25a4a;
border-radius: 50%;
width: 450px;
height: 450px;
margin: 0 auto;
}
#road{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;
width: 1020px;
height: 145px;
display: block;
}
#car{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;
width: 325px;
height: 125;
display: block;
position: absolute;
z-index: 9999;
}
#starynight{
background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;
width: 1012px;
height: 768px;
display: block;
}
Here's the Codepen:
Let me know if there are things on my markup and CSS that i need to fix or show me the actual codepen. Thanks!
Note: The main issue here is the positioning of elements. Let's say I want the text and circle to be align together and not have a padding. Similar thing with the background and the car image they wont just align at all.
Something like this?
http://jsfiddle.net/4kk1fyjg/
I basically set the background-position to cover, fixed the car height (missing px at the end) and set the wrapper position to relative so that the car should be absolute positioned according to the container.
let me know if this works as expected.
Not sure about the car position, but you can adjust the position changing the right or left property
EDIT
Here you are:
http://jsfiddle.net/4kk1fyjg/2/
Just wrap the content inside another div, set the circle position to relative, display as table, the new wrapping div as table-row and the #content as table-cell, then make the table cell vertically align in the middle and that should be it.
You miss <div id="content"> in circle-red.
Remove width from #starnight and add background-size: 100% do the same for #road.
To #car change position to relative and add:
float:right;
bottom:100px;
right:150px;
To #content remove margin-top and add padding-top:125px;
And finaly for .column h1 change margin to margin: 0 40px;
hope this work how expected
JSFiddle
Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem
so please it would be great to get some help and understand exactly where i did go wrong so i can learn it
thank you :D
Css and html
<%-- Footer --%>
<div id="footer">
<div id="footer_placement">
<div id="left">
<p></p>
</div>
<div id="middel">
<p></p>
</div>
<div id="right">
</div>
</div>
</div>
<%-- Footer --%>
#footer {
bottom: 0;
width: 100%;
display: block;
background-color: #fff;
max-height: 50px;
}
#footer_placement {
max-width: 1024px;
margin: 0 auto;
display: block;
max-height:50px;
}
#right {
float: right;
height: 50px;
width: 298px;
background-color:black;
}
#right img {
height: 50px;
width: 50px;
}
#middel {
height: 50px;
margin: 0 auto;
width: 300px;
background-color:black;
}
#middel p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
#left {
width: 298px;
height: 50px;
float:left;
background-color:black;
}
#left p {
text-align: center;
color: #321a51;
font-size: 12px;
font-family: muli;
}
use display:inline-block; for this ids: middle - left - right
Fiddle
Your problem is the width of the left right and middle divs .
They don't really add up .. try to change the width .. make it smaller
jsFIDDLE example