All...
I want to ask very basic CSS. Please see here http://jsfiddle.net/fzJ8X/5/
HTML:
<div class="container">
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
CSS:
.container {
width: 500px;
margin: 0 auto;
text-align: center;
border: #000 1px solid;
}
.item {
display: inline-block;
border: #F00 5px solid;
width: 200px;
height: 200px;
text-align: left;
}
.overlay {
border: #00F 5px solid;
width: auto;
height: auto;
}
.item img{
max-width: 100%;
height: auto;
display: block;
}
I have three boxes inside container with style text-align:center. Now all boxes centered like I want, but how to all boxes in float left? like screenshot below :
Screenshot here
Thank you very much :)
Try this:
JS iddle: http://jsfiddle.net/xZst7/3/
CSS:
.container {
width: 500px;
margin: 0 auto;
text-align: center;
border: #000 1px solid;
display: inline-block;
}
.item {
display: inline-block;
border: #F00 5px solid;
width: 200px;
height: 200px;
text-align: left;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
.overlay {
border: #00F 5px solid;
width: auto;
height: auto;
}
.item img{
max-width: 100%;
height: auto;
display: block;
}
HTML:
<div style="text-align: center;">
<div class="container">
<div style="display: inline-block; width: 430px;">
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
<div class="item">
<div class="overlay">
<img src="http://placehold.it/200x200" />
</div>
</div>
</div>
</div>
</div>
add float:left; to the code
.item {
display: inline-block;
border: #F00 5px solid;
width: 200px;
height: 200px;
text-align: left;
float:left;
}
jsfiddle:http://jsfiddle.net/fzJ8X/12/
Nothing much to do.
Add float:left; to .item{} as below.
.item {
display: inline-block;
border: #F00 5px solid;
width: 200px;
height: 200px;
text-align: left;
float:left;
}
Check the fiddle
Fiddle
Related
I was looking at this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_chat
and was interested in changing it so the maximum width of a message container is that of it's inner content (the length of the text). Currently the message container fills up the width of the body.
I have been trying many display methods etc however I've been unable to get the desired result.
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
.section {
padding: 20px;
background-color: #fafafa;
display: flex;
flex-direction: column;
}
.container {
margin-left: 0;
margin-right: auto;
}
.container.darker {
margin-left: auto;
margin-right: 0;
}
<section class="section">
<div class="container">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Hey! I'm fine. Thanks for asking!</p>
<span class="time-left">11:01</span>
</div>
<div class="container">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Sweet! So, what do you wanna do today?</p>
<span class="time-right">11:02</span>
</div>
<div class="container darker">
<img src="https://www.w3schools.com/w3images/avatar_g2.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span class="time-left">11:05</span>
</div>
</section>
just adding display:inline-flex solves your problem but you may still need to add clearfix div at end of every container here is working example to help you out.Hope that helps
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
display:inline-flex;
}
.darker {
border-color: #ccc;
background-color: #ddd;
direction:rtl;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<h2>Chat Messages</h2>
<div class="container clearfix">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Hey! I'm fine. Thanks for asking!</p>
<span class="time-left">11:01</span>
</div>
<div id="clearfix"></div>
<div class="container clearfix">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:100%;">
<p>Sweet! So, what do you wanna do today?</p>
<span class="time-right">11:02</span>
</div>
<div id="clearfix"></div>
<div class="container darker clearfix">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
<p>Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
<span class="time-left">11:05</span>
</div>
<div id="clearfix"></div>
I have a simple demo of an error I found. There is a flex div and a few images inside.
The sizes of the div and the images are unknown, I put some fixed values just to represent the problem.
The problem is that the images are not overflowing the div's width in FF, but they do in Chrome (the expected and desired behavior).
The main goal is to make only 3 images to be visible (33.3333% of the div's width for each image), even if there are more than 3 images.
Demo: http://codepen.io/alexandernst/pen/mPoeLP
HTML:
<div class="wrapper">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
</div>
CSS:
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
overflow: hidden;
}
.box {
border: 1px solid green;
max-width: 33.33333%;
position: relative;
padding-right: 10px;
align-self: center;
}
I'd suggest wrapping each of the images in a div and use the .box class on that instead.
Seems to work in Chrome 51 + FF 46
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
align-items: center;
overflow: hidden;
}
.box {
border: 1px solid green;
flex: 0 0 33.33333%;
position: relative;
padding-right: 10px;
}
.box img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
</div>
It is because you have padding-right. Try adding box-sizing: border-box;:
.box {
border: 1px solid green;
max-width: 33.33333%;
box-sizing: border-box;
position: relative;
padding-right: 10px;
align-self: center;
}
box-sizing will take padding in its calculations.
Updated codepen.
I'm trying to write a homepage with this little effect on a hover.
It should look something like this:
How would you do this? My code does not work like it should.
.stage_wrapper {
margin: 0 auto;
width: 1100px;
height: auto;
}
.work {
margin-left: 8px;
margin-right: 5px;
margin-bottom: 15px;
display: inline-block;
height: 350px;
width: 350px;
}
.work img {
width: 350px;
height: auto;
}
<div class="stage_wrapper">
<div class="stage">
<div class="work">
<a href="#" target="_blank">
<img src="//dummyimage.com/350" class="media" alt="#" />
<div class="caption">
<div class="work_title">
<h1>Something in 3 rows</h1>
</div>
</div>
</a>
</div>
</div>
</div>
Something like this?
.work {
width: 300px;
height: 300px;
line-height:300px;
text-align: center;
background-color: #2d3e50;
border: 10px solid #2a81b9;
color: white;
display: inline-block;
}
.work span {
display: none;
vertical-align: middle;
}
.work:hover span {
display: inline-block;
}
.work:hover img {
display: none;
}
<div class="work">
<span>Some text</span>
<img class="portfolio-image" src="http://dummyimage.com/300.png/09f/fff" width="300" height="300" />
</div>
Im trying to vertically align three images inside a div. But somehow my vertical alignment doesn't work and I cannot undertand what I'm doing wrong.
My html:
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="./images/leftarrow.png" width="64px" />
</div>
<div id="imagediv">
<img src="./images/pages/part3/nutrition/Nutrition_Front-1.png" width="296px" />
</div>
<div class="arrowdiv">
<img src="./images/rightarrow.png" width="64px" />
</div>
</div>
</div>
And my css:
.maketable{
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell{
vertical-align: middle;
display: table-cell;
}
#imagediv{
display: inline-block;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
display: inline-block;
width: 64px;
margin: 3px;
}
The result is the following:
As you can see, I want to have the arrows vertically aligned in the middle of the center picture, but how ever I do it, i cannot get it to work. I've tried fiddling with float but that made it much worse. Can anyone spot what i'm doing wrong?
You need to apply display: inline-block (or table-cell) and vertical-align: middle to .makecell, #imagediv and .arrowdiv.
Fiddle
.maketable {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 20px;
display: table;
clear: both;
}
.makecell, #imagediv, .arrowdiv {
vertical-align: middle;
display: inline-block;
}
#imagediv {
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
}
.arrowdiv {
width: 64px;
margin: 3px;
}
<div class="maketable">
<div class="makecell" id="cell1">
<input type="checkbox" id="nutrbox" value="nutrition" onclick="updateChoice()" />
<label for="nutrbox" onclick="updateChoice()">Jag vill ha näringstabell i slutet av min bok</label>
</div>
<div class="makecell" id="cell2">
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
<div id="imagediv">
<img src="http://www.dummyimage.com/296x420" width="296px" />
</div>
<div class="arrowdiv">
<img src="http://www.dummyimage.com/64" width="64px" />
</div>
</div>
</div>
Just change the display: inline-block; to display: table-cell; and add vertical-align: middle; in your .arrowdiv and #imagediv CSS:
#imagediv{
display: table-cell;
margin: 30px auto 0px auto;
width: 296px;
height: 420px;
color: #000;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.arrowdiv {
display: table-cell;
width: 64px;
margin: 3px;
vertical-align: middle;
}
Here is a DEMO Fiddle.
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/