I am trying to align two divs beside each other using the inline-block technique. My code is fairly simple, but I am not sure why is it not working, I don't know what the issue might be.
Here's my code:
.content .sidebar, .content .section {
display: inline-block;
border: none;
min-height: 200px;
width: 250px
}
.sidebar {
background: blue;
}
.section {
background: red;
}
<div>
<div class="header-area">
<h3 id="genericpartTitle">Our album</h3>
</div>
<div class="content">
<div class="sidebar"> hello! </div>
<div class="section">
<h5 class="item-title">Welcome to my section</h5>
<p style="white-space: pre" class="description"> Hello, anything will go here </p>
</div>
</div>
</div>
Aren't they supposed to be aligned beside each other? what's going wrong here? any help would be great.
You just need to add vertical-align: top; for both sidebar and section classes. checkout the code below.
.content .sidebar, .content .section{
display: inline-block;
border: none;
min-height: 200px;
width: 250px
}
.sidebar{
background: blue;
vertical-align: top;
}
.section{
background: red;
vertical-align: top;
}
<div>
<div class="header-area">
<h3 id="genericpartTitle">Our album</h3>
</div>
<div class="content">
<div class="sidebar">
hello!
</div>
<div class="section">
<h5 class="item-title">Welcome to my section</h5>
<p style="white-space: pre" class="description">
Hello, anything will go here
</p>
</div>
</div>
</div>
Related
I am trying to put a text under every image of an album. so I've added 6 photos side by side with float left. I know that the img tag is an inline-block of default so I put a div with class text with text inside and in the CSS I assigned it "display: block" in this way I thought I would make it appear under the image .. why this does not happen? I tried also to assign to the div text... position absolute and to the container position relative but this only works for the first image ...
.conteiner {
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
.box {
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: calc(100% / 6 - 20px);
height: 15vh;
float: left;
margin: 10px;
background-position: center;
}
.clearfix {
content: '';
display: table;
clear: both;
.text {
display: block;
}
<div class="conteiner clearfix">
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
enter image description here that's what I have
enter image description here and that's what I want to do
It would be much simpler to use Grid or Flexbox to get such a layout. No need for float and clear.
Using Grid:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
Then simply place the 6 images first to fill up the first row and the 6 texts second to fill up a second row.
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
</div>
Also, the content of the grid will be sized to fill the grid area so you may not have to explicitly size the box.
.box{
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: 100%;
height: 15vh;
background-position: center;
}
Try this :
https://codepen.io/the-wrong-guy/pen/xxZzBwR
.box {
display: grid;
}
I have three different div tags (not inside each other) with code so it has one puts words to left, center, or right but the center is very off centered. Here is HTML code:
.desc {
float: right;
color: skyblue;
}
.desc1 {
float: left;
color: skyblue;
}
.desc2 {
text-align: center;
color: skyblue;
}
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
You can use flexbox to fix that,
HTML:
<div class="container">
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
</div>
CSS:
.container{
display: flex;
align-items: center;
justify-content: space-between;
}
Try this
.desc {
text-align: center;
color: skyblue;
width:33%
}
.desc1 {
text-align: center;
color: skyblue;
width:33%
}
.desc2 {
text-align: center;
color: skyblue;
width:33%
}
.desc4{
display: flex
}
<div class="desc4">
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
</div>
Your desc2 contents are technically centered, relative to the remaining space. Your desc (right column) is getting pushed below the rest of your content because it will start floating from the point where the content of desc2 ends.
The easiest solution is to move desc up above desc2 so that the left/right floated items come first, and will start at the same y-position.
After that, if you want to ensure your main content is truly centered, you may need to specify a width for your left/right columns.
What you could do is actually wrap those 3 divs inside another div, and apply a display : flex to this main div, like so :
.main {
display : flex;
justify-content : space-between;
}
.desc {
float: right;
color: skyblue;
}
.desc1 {
float: left;
color: skyblue;
}
.desc2 {
text-align: center;
color: skyblue;
}
<div class="main">
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
</div>
Since the float property have some strange behaviour in some conditions, display : flex is much more appropriate when you want to display several parts side by side. I really recommend you to learn a little bit more about those flex properties, they are really time-saving. I hope it might help you.
I would use a wrapper around the existing divs and define a flexbox for it.
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10%;
}
.desc {
color: skyblue;
}
<div class="container">
<div class="desc">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
</div>
Try this:
.desc2 {
height: 200px;
width: 400px;
color: skyblue;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
Hope this is helpful :)
Try this .
body{
width:900px;
align-items:center;
margin:0 auto;
}
I think it's helps to you.
You can use flexbox for this and define styles for your body or wraps this blocks in container. No need for float here. Demo:
body {
/* become a flex-container */
display: flex;
/* vertically center flex-items */
align-items: center;
/* centering for text, optional here */
text-align: center;
/* occupy all height */
margin: 0;
height: 100vh;
}
/* equal width for children */
body > * {
flex: 1;
}
.desc {
color: skyblue;
}
.desc1 {
color: skyblue;
}
.desc2 {
color: skyblue;
}
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
You could also use the <center> </center> tag. It works quite well for this.
If you dont have to use the float you can simply remove the floats and enclose all your divs in a main div which alligns all text to center:
.desc {
color: skyblue;
}
.desc1 {
color: skyblue;
}
.desc2 {
color: skyblue;
}
.div1{
text-align:center;
}
<div class="div1" >
<div class="desc1">
<h2>What we are here to do!</h2>
<p>Example</p>
</div>
<div class="desc2">
<h2>What we have completed</h2>
<p>Recent work (can include pictures)</p>
</div>
<div class="desc">
<h2>Company Description</h2>
<p>EXAMPLE!</p>
</div>
</div>
This code:
#content {
width: 100%;
vertical-align: top;
}
#primo {
*display: inline-block;
width: 100%;
background-color: #aaaaff;
vertical-align: top;
}
#secondo {
*display: inline-block;
width: 100%;
background-color: green;
vertical-align: top;
}
<div id="content">
<div id="primo">
some content
<br />some content
<br />some content
<br />
</div>
<div id="secondo">
some
<br />content
<br />some
<br />content
<br />some
<br />content
<br />
</div>
</div>
is rendered as two <div> vertically aligned, one on the top of the other, plotting two different texts.
I would like to split the top-div into two subareas (two further sub-<div>) horizontally aligned, to plot within these two different texts.
How to achieve this?
It is like creating a two-lines matrix, whose first line has two columns, and the second line has only one column spanning over the full width.
EDIT
I would like to learn the basic code for doing something like this mockup:
Not sure if I understood your question correctly, but is this kind of layout you want to create(see the code snippet)?
EDIT: edited the code now the same layout but done in divs.
If this is the kind of things you want, I recommend you take a look at Flexbox layout, a good guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT2: Just saw your mock up picture, it is achievable using the Flexbox layout, but you need to tweak a lot of pixels/percentage/numbers to get the exact layout you want, see example in the second snippet.
.container {
width: 200px;
}
.flex {
display: flex;
}
.sameRow {
border: 2px solid black;
height: 40px;
width: 100%;
}
.normal {
height: 40px;
border: 2px solid red;
}
<div class="container">
<div class="flex">
<div class="sameRow">Content</div>
<div class="sameRow">Content</div>
</div>
<div class="flex">
<div class="sameRow">Content</div>
<div class="sameRow">Content</div>
</div>
<div>
<div class="normal">Content</div>
<div class="normal">Content</div>
</div>
</div>
.container {
width: 200px;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.flexColumn {
flex-direction: column;
}
.block {
border: 2px solid black;
height: 40px;
width: 20px;
}
.a0 {
width: 80%;
background: red;
}
.a1 {
height: 84px;
}
.a2 {
height: 50px;
background: green;
}
.a3 {
height: 30px;
background: blue;
}
.a4 {
width: 112px;
}
.a5 {
height: 18px;
background: orange;
}
<div class="container">
<div class="flex">
<div class="block a0 a1"></div>
<div class="flexColumn">
<div class="block a2"></div>
<div class="block a3"></div>
</div>
<div class="block "></div>
<div class="block a4"></div>
<div class="flexColumn">
<div class="block a5"></div>
<div class="block a5"></div>
</div>
<div class="block"></div>
</div>
</div>
You can use float left and float right .
I think is this that you want. check it out :
`http://jsfiddle.net/ss7e0aso/`
The best way to describe what I want to do is using this image. As you can see I have 3 different images as background (which are three different Divs) and I want to insert 3 List Points (here named as: "LV", "RP", "IP") with a centred description/heading below (here as: Lv: 15, RP: 16975 and so on).
My biggest problem is to handle the centred width of those elements. I have no idea how to solve this the best way regarding the CSS.
My HTML:
<div class="package">
<div class="item-description">
<div class="col-md-3"><span class="title">LV</span><span class="description">15</span></div>
<div class="col-md-3"><span class="title">RP<span><span class="description">16975</span></div>
<div class="col-md-3"><span class="title">IP<span><span class="description">40000</span></div>
</div>
</div>
Are you looking for something like this?
It's using quite a few elements (which could possibly be converted into pseudo elements), but it shows a general overview of what you might be looking for.
Also, with the id's and classes this shouldn't make it too hard to alter for your needs.
.container {
width: 32%;
height: 200px;
background: red;
display: inline-block;
}
.container .title {
margin-top: 100px;
width: 32%;
height: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
}
#one {
background: url(http://placekitten.com/g/300/300);
}
#two {
background: url(http://placekitten.com/g/200/200);
}
#three {
background: url(http://placekitten.com/g/300/200);
}
<div id="one" class="container">
<div class="title">200
<div class="desc">I'm a very long description</div>
</div>
<div class="title">300
<div class="desc">desc</div>
</div>
<div class="title">400
<div class="desc">Be More Dog</div>
</div>
</div>
<div id="two" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">I'm a tree.</div>
</div>
<div class="title">400
<div class="desc">What is a description?</div>
</div>
</div>
<div id="three" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">a description of what?</div>
</div>
<div class="title">400
<div class="desc">Don't you like, er, trees?</div>
</div>
</div>
this might also work:
Note: I've used a pseudo effect here, but to keep my code 'minimal', rather than applying it to individual items (as you would for individual descriptions), i've just used an existing item.
html,
body {
margin: 0;
padding: 0;
}
.sec {
width: 33%;
height: 200px;
background: red;
background: url(http://placekitten.com/g/200/200);
position: relative;
text-align: center;
color: white;
vertical-align: middle;
display: inline-block;
line-height: 200px;
margin-left: -0.5%;
}
.col {
width: 32%;
margin-left: -0.5%;
font-size: 25px;
display: inline-block;
position:relative;
}
.col:after{
padding-top:25px;
font-size: 10px;
position:absolute;
content:"description";
left:25%;
}
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
Try this in your css
.description, .title{float:left; width:100%; text-align:center;}
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.