This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 6 years ago.
I have an image with a container next to it and I am having issues getting them aligned properly. I have used inline-block throughout the rest of the website and had no issues with it.
If anyone knows how I would fix this, that would be amazing.
Here is my code:
.talentcontainer {
width: 960px;
height: auto;
margin: 0 auto;
background-color: #fff;
}
.talentimg {
width: 250px;
height: 280px;
max-width: 80%;
text-align: center;
display: inline-block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
overflow: hidden;
margin: 0 auto;
}
.talentcontent {
width: 450px;
height: auto;
max-width: 80%;
text-align: center;
display: inline-block;
background-color: #000;
margin: 0 auto;
min-height: 280px;
margin: 0 auto;
}
<div class="talentcontainer">
<div class="talentimg">
<img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
</div>
<div class="talentcontent">
<h8>NAME HERE</h8>
</div>
</div>
And h is an image of the issue that I am having:
Use vertical-align: top alongwith display: inline-block.
.talentcontainer {
width: 960px;
height: auto;
margin: 0 auto;
background-color: #fff;
}
.talentimg {
width: 250px;
height: 280px;
max-width: 80%;
text-align: center;
display: inline-block;
vertical-align: top;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* future proofing */
-khtml-border-radius: 10px;
/* for old Konqueror browsers */
overflow: hidden;
margin: 0 auto;
}
.talentcontent {
width: 450px;
height: auto;
max-width: 80%;
text-align: center;
display: inline-block;
vertical-align: top;
background-color: #000;
margin: 0 auto;
min-height: 280px;
margin: 0 auto;
}
<div class="talentcontainer">
<div class="talentimg">
<img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png">
</div>
<div class="talentcontent">
<h8>NAME HERE</h8>
</div>
</div>
You can do this by floating the elements as well.
add floating left for both elements.
.talentimg{
float:left;
}
.talentcontent{
float:left;
}
Related
I have two divs, side by side, where one (right) has more content that the other (left). I've been trying to have the left one, horizontally align with the right one, so they both can be on one line. Like the drawing below.
Here is my code:
.allinside {
display: flex;
vertical-align: top;
}
.profile_part {
background-color: #a7f996;
border-radius: 25px;
width: 18%;
margin: 0 10px 0 10px;
margin-right: auto;
}
.mid_part {
background-color: #a7f996;
border-radius: 25px;
width: 70%;
margin: 0 10px 0 10px;
margin-left: auto;
}
.textinside {
padding-bottom: 10px;
text-align: center;
}
<div class="allinside">
<div class="profile_part">
<img id="mimi" src="img/profilepic.gif" alt="Maria" />
<p class="textinside">Maria's choices</p>
</div>
<div class="mid_part">
<h2>The last book I read:</h2>
<img src="img/bravenewworld.jpg" alt="Brave new world" />
<p class="textinside">SOME TEXT INSIDE</p>
<h2>My favourite book:</h2>
<img src="img/searchformeaning.jpg" alt="Man's search for meaning" />
<p class="textinside">SOME TEXT INSIDE</p>
</div>
Getting to know the display types might help(inline, inline-block, block, flex)
Here, the flex at the parent is causing the elements to stretch.
Try inline-block
.allinside{
}
.profile_part{
background-color: #a7f996;
border-radius: 25px;
width: 18%;
margin: 0 10px 0 10px;
margin-right: auto;
vertical-align:top;
display:inline-block;
}
.mid_part{
background-color: #a7f996;
border-radius: 25px;
width: 70%;
margin: 0 10px 0 10px;
margin-left: auto;
display:inline-block;
}
.textinside{
padding-bottom: 10px;
text-align: center;
}
set
.allinside {
display: flex;
align-items: flex-start;
}
.profile-part, .mid-part {
margin: 0 auto;
}
.div-1 {
background-color: #deb887;
margin: 0 auto;
width: 100%;
height: auto;
display: inline-block;
}
.div-2 {
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
<div class="div-1">..... some code here </div>
<div class="div-2">..... some code here</div>
a white space is coming between 2 div, under one another
I found some solution of this problem, but they are not working.
vertical-align: top; ----- not working
line-height: 0px; ------ it effects on the text of div
font-size: 0px; ------- it also effects on text
*{
margin:0;
padding:0;
------------------ not working
Please help, thanks in advance.
.div-1{
display: block;
width: 100%;
background-color: #deb887;
margin: 0 auto;
height: auto;
}
.div-2 {
height: 10px;
vertical-align: top;
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
Try this way:
<div class="div-1">..... some code here </div><!--
--><div class="div-2">..... some code here</div>
Please note the comment syntax
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I'm running into this issue where there's a gap between two div tags. Here's my code -- I've tried to manually overwrite the margin/padding associated with the two divs and doesn't seem like it helps.
Here's what the CSS look like
.left_block{
display: inline-block;
background-color: blue;
width:40%;
height: 2em;
margin: 0px;
margin-right: 0px;
padding-right: 0px;
border-width: 0px;
overflow: hidden;
}
.right_block{
margin: 0px;
display: inline-block;
background-color: red;
width: 59%;
height: 2em;
margin-left: 0px;
padding-left: 0px;
border-width: 0px;
overflow: hidden;
}
Here's the HTML part
<div class="playground">
<div class = 'left_block'></div>
<div class = 'right_block'></div>
...
What am I missing?
What about using float property? Will it be a problem with your css?
.left_block {
display: inline-block;
background-color: blue;
width: 40%;
height: 2em;
margin: 0 auto;
padding: 0;
float: left;
}
.right_block {
display: inline-block;
background-color: red;
width: 60%;
height: 2em;
margin: 0 auto;
padding: 0;
overflow: hidden;
float: left;
}
<div class="playground">
<div class='left_block'></div>
<div class='right_block'></div>
</div>
I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:
[pic removed by poster]
and here is the code I've got:
<div class="newsdiv">
<div class="picdiv" style="background-image: url('[...]');"></div>
<div class="titlediv">
<font size="4">', $row['title'], '</font>
</div>
<div class="textdiv">
<font size="1">This is some dummy text</font>
</div>
<div class="linksdiv">
[Read More...]
<div class="statsdiv">
Views: 0 , Comments: 0
</div>
</div>
</div>
and the stylesheet:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
}
Any ideas of how to do this? Thanks!
You need float here
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
May be there will be more cleaner solution but you can try this for now
.linksdiv > a{
margin-left:12%;
}
Updated Demo
You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.
Updated CSS(modified classes only):
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
position: relative; /*added*/
}
.statsdiv{
font-size: 7pt;
/* text-align: right; not required */
display: inline-block;
height: 10px;
position: absolute; /*added*/
right: -0.5%; /*added*/
}
FIDDLE
Consider this working css. Here is Demo
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right;/*added*/
}
Add this to your .statsdiv css
float:right;
here is the fiddle http://jsfiddle.net/cc68d/
Edit :- Although this works, as pointed out by you , it does not align Read More[..] in center. Actually the issue is with the design part. I will not go into details. You can correct this by adding style="padding-left:100px;" to your ReadMore[..] <a> tag attribute.
as shown here http://jsfiddle.net/cc68d/1/
Replace your total css code, You need float on the class .statsdiv
Your total modified code is:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
You could make your div go out of the flow making its position absolute :
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
position: absolute;
align: right;
padding: 0 15px;
width: 96%;
left: 0;
}
Needs a little tuning to make it right in all definitions though...
Add a third div with a width of how ever wide you need it with no content between them - a place holder div ...remember to float right , text align and a margin as well.
I'm probably turning mad but I really cannot seem to find out what I'm doing wrong. I'm simply trying to center my image.
<div class="container ">
<img src="design/images/logo.png" alt="logo" class="logo" />
<div class="contactData">
data
</div>
</div>
This is my CSS:
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
}
.contactData {
max-width: 206px;
margin: 30px auto 0 auto;
text-align: center;
float: none;
}
The contactData div just centers fine but the image doesn't.
add display:block; in your .logo
That should probably fix it
Use either display: block; or display: inline-block; while you are using margin: auto; for the images.
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
display: block;
}
Images are inline by default and you need to trigger hasLayout or something similar.
add this code
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
text-align: center;
vertical-align: middle;
You are not specifying any aligning for image.
In the container class, Just give
text-align:center;
In .logo just add display:block; in your CSS.