This question already has answers here:
How do you make div elements display inline?
(20 answers)
Closed 4 years ago.
Hello everyone i have a header with a div in my header with a pic in it but i want to display my pics next to eachother but instead of that its displays it under each other how can i fix this i tried to change my css but didnt work.
its now like this when i add anoter div
How it is now:
I want it like this:
this is my code
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html,
body {
margin: 0;
height: 120%;
font-family: 'Josefin Sans', sans-serif;
}
.header {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
height: 50vw;
min-height: 400px;
max-height: 550px;
min-width: 300px;
color: #eee;
}
.header:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
background: #1B2030 url(https://unsplash.it/1999/999?image=1063) top center no-repeat;
background-size: cover;
background-attachment: fixed;
animation: grow 60s linear 10ms infinite;
transition: all 0.2s ease-in-out;
z-index: -2
}
.header a {
color: #eee
}
.info {
width: 100%;
padding: 25% 10% 0 10%;
text-align: center;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
}
.author {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background: url(http://favim.com/media/uploads/images/610/140308/black-n-white-cute-funny-iron-man-Favim.com-1462744.jpg) center no-repeat;
background-size: cover;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
margin-bottom: 3px
}
.info h4,
.meta {
font-size: 0.7em
}
.meta {
font-style: italic;
}
.twtr {
margin-top: 100px
}
.btn.twtr:after {
content: "\1F426";
padding-left: 5px
}
<body>
<div class="header">
<div class="info">
<h1>TestHeader</h1>
<div class="meta">
test
</div>
<div class="meta">
<br> By James Nodws on May 30, 2017
</div>
</div>
</div>
</body>
You First Have clear the body from margin and padding just in case
body{padding:0;margin:0;}
after that give each div 25% width and display either inline or inline-block
div{width:25%;display:inline;}
Add :
.meta {
display: inline-block
}
div are int display mode block by default, so it wraps the entire ligne. Change to inline-block to allow multiple divs horizontally
You have two options here
You can use Bootsrap as described in here.
Use below CSS
.meta {
float:left;
width: 30%;
}
You can use any other class which is applied only for image divs.
I think you should try using .
.meta {
display : flex;
}
This also aligns all the the <divs> in a single row
you can use flex property for,
Display:flex apply flex layout to the flex items or children of the container only. So, the container itself stays a block level element and thus takes up the entire width of the screen. ... Display:inline-flex apply flex layout to the flex items or children as well as to the container itself.
Related
i have a probably rather easy question. I gave my body a background gradient and set it as a flexbox. I can give my 2 text elements the position absolute and everything works fine. But as soon as i give my box (which should have the same relation to the body as the text elements) an absolute position, my background gradient disappears. With a relative positioning that doesnt happen. I know i can work with relative here as well, but I just want to know why this happens to my background gradient. Hope sb can help,
Thanks
body {
margin: 0;
height: 100%;
background-image: linear-gradient(
to right,
rgb(69, 174, 201),
rgb(169, 248, 253)
);
display: flex;
justify-content: center;
flex-wrap: wrap;
}
h2 {
text-align: center;
font-size: 40px;
width: 100%;
position: absolute;
}
.poben {
text-align: center;
font-size: 20px;
letter-spacing: 0.2em;
width: 100%;
position: absolute;
top: 60px;
}
.center-box {
/* if I change the position below to absolute, the page gets white */
position: relative;
height: 800px;
width: 200px;
background: linear-gradient(rgb(17, 17, 53), rgb(62, 55, 102));
border-radius: 2%;
box-shadow: 10px 10px 10px hsl(284, 100%, 9%);
}
<h2>Test survey form</h2>
<p class="poben">Thanks for talking part in this survey!</p>
<div class="center-box">
</div>
Position: Absolute; when you use this it basically removes the element from the flow of the document. It behaves like it's not present there. You can use left/right/top/bottom properties to move the element anywhere you want.
Position: Relative; when you use this, it basically keeps the element in the flow of the document. You can use left/right/top/bottom properties to move the element relative to its parent container.
In your code, the body is the parent container.
When you give the child elements of this container as position: absolute; it basically moves them out of that body container.
Now body thinks there is no child inside me and its height is now 0 i.e no content no value. You inspect that in the Chrome Inspector and check the box model to understand it.
body {
margin: 0;
padding: 1px; /* Filling the body with some content */
height: 100%;
background-image: linear-gradient(
to right,
rgb(69, 174, 201),
rgb(169, 248, 253)
);
display: flex;
justify-content: center;
flex-wrap: wrap;
}
h2 {
text-align: center;
font-size: 40px;
width: 100%;
position: absolute;
}
.poben {
text-align: center;
font-size: 20px;
letter-spacing: 0.2em;
width: 100%;
position: absolute;
top: 60px;
}
.center-box {
/* if I change the position below to absolute, the page gets white */
position: absolute;
height: 800px;
width: 200px;
background: linear-gradient(rgb(17, 17, 53), rgb(62, 55, 102));
border-radius: 2%;
box-shadow: 10px 10px 10px hsl(284, 100%, 9%);
}
<h2>Test survey form</h2>
<p class="poben">Thanks for talking part in this survey!</p>
<div class="center-box">
This might help - https://css-tricks.com/almanac/properties/p/position/
I have an HTML structure like:
.container {
width: 100%;
height: 300px;
background-color: blue;
}
.dots-container-wrapper {
width: 100%;
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
.dots-container>ul {
padding: 0;
display: flex !important;
transition: all 0.25s;
position: relative;
margin: 0;
list-style: none;
transform: translateX(0);
align-items: center;
bottom: unset;
height: 100%;
}
.dots-container>ul li {
width: 6px;
height: 6px;
margin: 0 2.5px;
background-color: #fff;
border: none;
border-radius: 50%;
display: inline-block;
opacity: .7;
}
<div class="container">
<div class="dots-container-wrapper">
<div class="dots-container">
<ul class="dots">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The problem is that the div "dots-container" has a property max-width: 55px. But in case the width is less than 55px, I would like to use the real width, however, the div is always 55px. This is a problem because I´m using this in a carousel with dots functionality. When there are 5 pictures, you can see 5 dots aligned in the center, but in case there are fewer pictures, let´s say 2, the div is still 55px and the dots don´t seem to be aligned in the center. See example screenshots.
Your .dots-container is displayed as a block. By default a block will always try to fill up the entire width. By making the container .dots-container-wrapper display flex, it's children will only take up as much space as they need (while also centering them if needed).
.dots-container-wrapper {
width: 100%;
display: flex; // change to flex
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
I have a problem making a child div taking the whole width and height even if I make it 100% in width and height as shown in the code bellow
<div id="images_rows">
<div class="img_item"><div><span>Gone Fishing</span></div></div>
<div class="img_item"><div><span>By the sea</span></div></div>
<div class="img_item"><div><span>The great valley</span></div></div>
<div class="img_item"><div><span>A night to remember</span></div></div>
<div class="img_item"><div><span>On the lake</span></div></div>
<div class="img_item"><div><span>On the mountains</span></div></div>
<div class="img_item"><div><span>Take a flight</span></div></div>
<div class="img_item"><div><span>going to the forest</span></div></div>
</div>
The CSS is as the following :
div#images_rows {
font-size: 0;
}
div.img_item {
width: 25%;
min-width: 250px;
max-width: 799px;
margin:0;
height: 270px;
display: inline-block;
position: relative;
}
div.img_item > div {
width: 100%;
height: 100%;
display: table;
background-color: rgba(85, 85, 85, 0.5);
color: #fff;
font-family: lovelo;
text-align: center;
transition: 200ms cubic-bezier(0.15,0.75,0.5,1);
cursor: pointer;
}
div.img_item > div:hover {
background-color: rgba(85, 85, 85, 0);
background-size: 110%;
}
div.img_item > div > span {
display: table-cell;
vertical-align: middle;
font-size: 20px !important;
}
and this is the artifact I am having :
and this is the result in the browser as shown in inspect element:
That's the Parent div :
And this is the child div :
And as we can see there are some floating numbers because of percentage style of the parent div, and the child doesn't take the whole width the floating numbers which leaves a space not covered
Is there any ideas how this problem can be solved ?
I have header tag, which has full width/height image on the background.
I need to algin elements in the center of that page exactly as picture shows.
First goes image, than text, than buttons one after another one and on the very bottom of the page is slider
apart from slider, I've managed to put all content to the center with code below
Also, I'm using boostrap and jquery if needed
It's one page design, this is just a header
Thank you for any help :)
<header>
<img src="" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
</div>
</header>
SCSS
header {
margin-top: -56px !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 5%;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
}
.btn {
#include Myriad-Pro-Light;
}
.btn-green {
margin-top: 5%;
color: #fff;
}
.btn-grey {
color: #000;
}
.swiper-container {
margin-top: 5%;
width: 100%;
height: 300px;
}
}
You can achieve this by using the following properties at the appropriate places.
text-align:center;
display:flex;
align-center;
margin:0 auto;
Also as your using bootstrap so some of the classes may get overwritten so make sure to use !important on properties that you want to force your setting on.
Using your code i have made some changes using the above mentioned suggestions and here is the code:
<header>
<img src="http://placehold.it/350x150" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
<p>Large full width div, which must stay on the bottom of the header tag</p>
</div>
</header>
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
min-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
margin: 0 auto;
display: block;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
text-align:center;
}
.btn {
#include Myriad-Pro-Light !important;
margin: 10px auto !important;
display: block !important;
width: 25vw !important;
text-align:center !important;
padding: 6px 0px !important;
}
.btn-green {
color: #fff;
display:block;
}
.btn-grey {
color: #000;
display:block;
}
.swiper-container {
background-color:red;
width: 100%;
height: 300px;
position:absolute;
bottom:0;
display: flex;
align-items: center;
justify-content: center
}
.swiper-container p{
#include Myriad-Pro-Light !important;
margin:0 auto;
color:white;
font-size: 18px;
}
Here is a sample using this code. http://codepen.io/Nasir_T/pen/PboZme
I have a photo caption. It works nicely when the browser is not
bigger than the photo size. When it is bigger, the photo is in the
center. I don't know how I can make the caption always begin in the photo's left corner.
HTML
<div>
<img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg">
<span id="cap">Photo Caption</span>
</div>
CSS
#pht{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
#cap{position:absolute;
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
color: yellow;
display: inline-block;
font: bold 13px/30px Helvetica,sans-serif;
letter-spacing: -1px;
padding-left: 5pt;
padding-right: 5pt;
}
fiddle: http://jsfiddle.net/qpxkypn8/
Try this..
HTML
<div>
<div id="dpht"><img id="pht" src="http://farm4.static.flickr.com/3065/2741653860_468fda7e7a.jpg"></div>
<span id="cap">Photo Caption</span>
</div>
CSS
div{
max-width: 500px;
margin: 0 auto;
}
#dpht{
display: flex;
flex-direction: row;
}
#pht{
display: block;
}
#cap{
flex: none;
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
color: yellow;
display: inline-block;
font: bold 13px/30px Helvetica,sans-serif;
letter-spacing: -1px;
padding-left: 5pt;
padding-right: 5pt;
}
Check out this Fiddle
Add the following CSS
div {
position: relative; /* positions absolutely-positioned
children relative to this element */
display: inline-block; /* makes the div only as large as its img child */
}
#cap {
top: 100%; /* these put #cap under the */
left: 0; /* bottom left corner of the img */
}
Updated JSFiddle
Are you able to alter the HTML? If so, you could use a container div to achieve the following:
http://jsfiddle.net/hkqgkee5/
To center a div using auto margins, you generally need to specify a width explicitly. Using display: table on the containing div will allow you to bypass that restriction.