The problem is that one div shifts down and one up, why?
I did two double divs, both inline-block and floated to right, the same inside each block.
I'm tried many changings, without any solution.
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
}
.lawyer-avatar {
display: inline-block;
height: 100px;
width: 100px;
float:right;
}
.lawyer-avatar-relative {
position: relative;
}
.lawyer-name-box{
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
height: 2em;
background: rgba(25, 126, 215, 0.9);
color: #fff;
}
.lawyer-name-box span{
padding: 10px 10px 10px 0;
}
.lawyer_description {
background: rgba(25, 126, 215, 0.5);
height: 100px;
width: 100px;
display: inline-block;
clear: right;
}
<div id="lawyer-1" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">short text</div>
</div>
<div id="lawyer-2" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">long text long text long text</div>
</div>
The problem is that one div shifts down and one up, why?
I did two double divs, both inline-block and floated to right, the same inside each block.
I'm tried many changings, without any solution.
You should add a vertical-align: top on your .lawyer-online class.
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align: top;
}
This behaviour is occurring because an inline-block receives by default vertical-align: baseline, which doesn't always align elements in a desired manner.
You can rectify this by explicitly specifying vertical-align: top in your declaration block for .lawyer-online. (Or middle/bottom, they work too as values.)
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align: top;
}
.lawyer-avatar {
display: inline-block;
height: 100px;
width: 100px;
float:right;
}
.lawyer-avatar-relative {
position: relative;
}
.lawyer-name-box{
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
height: 2em;
background: rgba(25, 126, 215, 0.9);
color: #fff;
}
.lawyer-name-box span{
padding: 10px 10px 10px 0;
}
.lawyer_description {
background: rgba(25, 126, 215, 0.5);
height: 100px;
width: 100px;
display: inline-block;
clear: right;
}
<div id="lawyer-1" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">short text</div>
</div>
<div id="lawyer-2" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">long text long text long text</div>
</div>
You need to add vertical-align:top
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align:top;
}
Related
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>
i have a button inside a div which is currently at the top of the div. I want to center it vertically inside iths parent div.
.button-login {
background-color: white;
border: 2px solid #01BDE0;
border-radius: 4px;
color:#01BDE0;
width: 100%;
height:46px;
vertical-align: middle;
font-size: 1vw;
display: block;
}
This is css for button.
<div class=" pure-u-1 pure-u-md-2-24"><button class="button-login">LOG IN</button></div>
This is the html part.
I tried vertical align its not working.
Try This...
<style>
.pure-u-1 { width:100%;}
.center {height: 500px; background-color: #222;}
.vertical-align {position: relative; top: 50%; transform: translateY(-50%); }
</style>
<div class=" pure-u-1 pure-u-md-2-24">
<div class="center" align="center">
<div class="vertical-align">
<button class="button-login">LOG IN</button>
</div>
</div>
</div>
.video-contant {
position: absolute;
background: rgba(7, 7, 7, 0.52);
width: 100%;
top: 0px;
height: 100%;
display: table;
}
.hctr {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
width: 100%;
overflow: hidden;
}
<div class="video-contant">
<div class="hctr">
<button>onewebbell.com<button>
</div>
</div>
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/
For the following HTML, I would like the container to wrap the section+content+element(s), and I would like element2 to be a direct (float:left?) continuation of element1..
<div class="page">
<div class="container">
<div class="section">
<div class="content">
<div class="element1">Elements Goes Here And Here And Here And Here .. more elements hereafter</div>
</div>
</div>
<div class="section">
<div class="content">
<div class="element1">Elements Goes Here And Here And Here And Here</div>
<div class="element2">more elements hereafter</div>
</div>
</div>
</div>
</div>
This CSS isn't working though http://jsfiddle.net/sLnY5/3/:
.container {
width: 100%;
min-height: 74px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
}
.section {
width: 100%;
min-height: 37px;
height: auto;
border: 1px solid rgba(142, 142, 142, 1);
background-color: blue;
}
.content {
float: left;
min-height: 37px;
height: auto;
width: 100%;
line-height: 1.42;
padding: 2%;
border: 1px solid rgba(142, 142, 142, 1);
}
.element1 {
float: left;
font-size: 12.9px;
padding-top: 2px;
letter-spacing: 0.07em;
background-color: green;
}
.element2 {
float: left;
padding-left: 3px;
background-color: purple;
}
.page {
width: 50%;
height: auto;
margin: 0 auto;
padding-top: 5%;
}
I can't think of a scenario where you would want to use float: left; with width: 100%;. In my experience, float is overused and largely misunderstood. I'm not sure what you mean by "a direct continuation of element1", but it sounds like you might want display: inline;.
jsfiddle.net/sLnY5/4