My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;
Related
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
I can't get this to work :( I'm just trying to float the image slightly outside the box (half in, half out) above the name but in the center. What am I doing wrong here?
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/ffxyc6d0/1/
try This One :
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
width: 150px;
height: 150px;
position: relative;
bottom: 50px;
text-align:center;
}
.box_info_name_inside{
}
<body>
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>
If the image is fixed size (not going to change dynamically) you can position it with a negative margin of half the images height, e.g. margin-top: -85px; (Take an extra -10px off as well as the half image height since there's 20px of padding on the parent container)
Example below:
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
display: inline-block;
margin-top: -85px;
max-width: 100%;
height: auto;
text-align: center;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
You can do it with flexbox as well :)
body{
margin-top:100px;
}
.box_info{
background: #ccc;
}
.box_info_name{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24px;
}
.box_info_logo{
position: relative;
margin-top: -75px;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150/fff" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I like to give 'outside the box' answers to questions like this, without using javascript having to change all the margins gets to be a little annoying. So I've tackled it another way. Rather than moving everything around the page why not just make part of the background transparent.
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
<div class="box_info">
<div class="box_info_name">
<img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
<div class="box_info_name_inside">Andrew Bone</div>
</div>
</div>
I've used background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); to say anything after 95px should be #DDD and before that needs to be transparent.
95px is height of the image (150px) divided by 2 (75px) plus the padding of the outer box (20px).
Which is great if the image size stays the same, if you plan on it changing then we might need to look at adding a little javascript.
linear-gradient is not supported in IE6 but is in modern IE as well as Edge, Chrome, and firefox.
I hope you find this helpful.
I'm not sure if I'm understanding your question correctly, but maybe this is waht you wan't.
I've simply removed the position: absolute from your .box_info_logo class.
Like this:
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
max-width: 100%;
height: auto;
text-align:center;
}
.box_info_name_inside{
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
To keep .box_info the same size as that in your jsfiddle example, you can add position: relative to this class whilst keeping .box_info_logo as position: absolute.
body {
margin-top: 150px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
position: relative;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: 50px;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
How can I synchronize the height of an image with the height of a text area, depending on the screen size? I do not want to use the left border of the text area because I want a visual separation between the left bar and the text. I do not want the width of the bar to be adjusted simultaneously, because it is only a visual separator in the page; the bar should be just as long as the text on its right side.
NB: the bar is not restricted to an image; it can be anything as long as the result is a colored vertical bar with the correct height.
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #fff8dc;
float: left;
margin: 0 20px 0 0;
overflow: auto;
height: 100%
}
.text {
margin: 0px 40px 0px 40px;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
<div class="common">
<p>blabla</p>
</div>
<div>
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar" width="30px" height="400px" style="background-color: #E3B90A;">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
You can do it this way:
HTML:
<div class="common">
<p>blabla</p>
</div>
<div class="container">
<div class="detail">
<img src="widgets/spacer.gif" alt="vertical bar">
</div>
<div class="text">
<h1>BLABLA</h1>
<p>blablabla</p>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #fff8dc;
color: grey;
font-family: Arial;
font-size: 1em;
position: relative;
min-height: 100%;
}
.container{
display: flex;
flex-direction: row;
}
.common {
background-color: #fff8dc;
float: left;
width: 25%;
height: 100vh;
text-align: center;
padding: 0 40px 10px 40px;
}
.detail {
background-color: #E3B90A;
width: 30px;
height: auto;
}
.detail img{
width: 100%;
height: auto;
}
.text {
width: 100%;
background-color: #ffffff;
padding: 10px 20px 10px 20px;
}
Fiddle: https://jsfiddle.net/debraj/s84yxh8L/
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.
I want to have a centered grid of buttons that take up the full width, but I can't seem to get the container centered no matter what I try.
Here's the jsfiddle - https://jsfiddle.net/a6qo6tzL/
Thanks
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
CSS
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}
Your main problem is that your gridButton has
float: left;
Instead, use
display: inline-block;
Now your buttons can move freely next to one another and be centered. Your wrapper element is already full width but you'll need to tell it to center its content:
.Wrapper {
display:block;
width: 100%;
text-align: center;
}
You can get rid of margin: 0 auto because that will only affect blocks with a known width.
.Wrapper {
display: block;
text-align: center;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
display: inline-block;
width: 250px;
text-align: center;
text-transform: uppercase;
}
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
You've got .Wrapper set to 100% width, so even though you have margin: auto, the container is full width and will not appear centered. Set it to a constant width at a higher breakpoint:
#media (min-width: 500px) {
.Wrapper {
width: 500px;
}
}
Then consider wrapping your buttons in a columns:
.cell {
float: left;
width: 50%;
}
Here is your updated fiddle.
Use flexbox:
.Wrapper {
display:flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 auto;
width: 100vw;
}
DEMO
I also replaced the width to viewport units
have a look here if this is what you want
https://jsfiddle.net/Raider/744wv0o7/
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
border:1px solid;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px auto;
/*float: left;*/
width: 250px;
text-align: center;
text-transform: uppercase;
}
Is this what you need?
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
width: 250px;
text-align: center;
margin:auto;
text-transform: uppercase;
}
You where using float:left; property which prevents the div's from being centered