I want to achieve the expected layout below (first image) but stuck with actual layout (second one)
Here is how I started
.parent .child{
float: left;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
How can i take it further to expected layout?
keep css :change float left to display:inline-block
.parent{ text-align: center;}
.parent .child{
display:inline-block;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
Try like this: LINK
css:
.parent{
margin: 0 auto;
display:block;
text-align:center;
}
.parent .child{
display:inline-block;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
Related
This is margin range from chrome:
body {
margin: 0px;
padding: 20px;
}
.article {
background-color: #eee;
padding: 20px;
border: 2px solid #999;
overflow: hidden;
}
.left {
position: absolute;
top: 40px;
left: 40px;
width: 160px;
padding: 20px;
border: 2px solid #999;
background-color: #fff;
}
.right {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
width: 80px;
background-color: #fff;
border: 2px solid #999;
}
.middle {
position: absolute;
margin-left: 220px;
margin-right: 180px;
background-color: #fff;
border: 2px solid #999;
padding: 20px;
word-break: break-all;
}
img {
width: 80px;
}
<div class="article">
<div class="left">sldkfjlsj</div>
<div class="middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="glm.jpg"></div>
</div>
Begin I think the reason is the width of father tag is not solid. I try it, but no effect. And then I try set relative to father tag and the margin-right is begin from body, also not symmetry.
You are mixing and matching.
for absolute positioning what matters is left, top, right, bottom, width and height.
But my guess is that you don't need it.
What you are trying to achieve is a column of text in the middle of .article with some sides.
You will almost achieve it if you drop the absolute positioning of .middle.
then the margins on it will start where you want. And you'll be left with figuring out the offsets.
body {margin: 0px; padding:20px; position:relative;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle { margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}
<div class = "article">
<div class = "left">sldkfjlsj</div>
<div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="http://lorempixel.com/output/people-h-c-80-120-10.jpg"></div>
</div>
A good article about css positioning
I have an outer div with box-shadow and I want this to appear over an inner div. But it always appears under it. The jsfiddle is here.
My HTML is:
<div class="wrapper">
<div class="inner">
</div>
</div>
And CSS:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner{
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
}
Is it possible to get it so that the box-shadow appears over the inner blue div? The semantics of the HTML cannot change.
Set the position of the child to relative and the z-index to -1:
.wrapper {
width: 200px;
height: 100px;
border: 1px grey solid;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
<div class="wrapper">
<div class="inner">
</div>
</div>
update the styles of inner class with position absolute and give z-index: -1;;
.inner {
width: 180px;
height: 80px;
margin: 10px;
background-color: lightblue;
position:relative;
z-index:-1;
}
Here is the updated jsFiddle
You can do what you are wanting without the inner container as well.
http://codepen.io/creativenauts/pen/rLWZqp
* {
box-sizing: border-box;
}
.wrapper {
width: 200px;
height: 100px;
border: 20px solid #fff;
background-color: lightblue;
box-shadow: 0px 0px 1px rgba(#000, 0.5);
position: relative;
&:before {
position: absolute;
content: '';
width: 100%;
height: 100px;
top: -20px;
left: -20px;
box-shadow: inset 40px 0 10px -10px #bbbbbb;
}
}
I have 3 boxes and the first one it's a bit up then the other 2..
The other 2 boxes are ok next to eachother and in the same line.. but first box its not on the same line with the other 2.. its a few pixels up.
This is the css code
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
How i can fix that?
use this css -
box-sizing: border-box;
on each box. This help you produce desired and accurate result.
Fiddle
Reduce the padding on the first box to 80px(Same as other two boxes). The padding value adds to the overall height of the box.
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: tomato;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
<div id="services1"></div>
<div id="services2"></div>
<div id="services3"></div>
Update the first block, you need padding 100px to 80px
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: red;
height: 400px;
}
Its because of padding-top: 100px; other two boxes were having 80px padding.. Demo
As all the boxes were of 400px height with padding, you can adjust height or change the padding to 80px of 1st box.
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: red;
height: 380px; / *changed value*/
}
I'm having issues with aligning some elements inside a nav bar.
Here's an example on jsfiddle: http://jsfiddle.net/flobar/b7nzR/
Here's the html:
<div id="nav">
<div id="menu">Menu</div>
<div id="logo">Logo</div>
<div id="settings">Settings</div>
</div>
Here's the css:
#nav {
height: 60px;
border: 1px solid #ccc;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
}
The issue is that the far right block is being pushed down by the center block, but I'm not sure why.
Can anyone help please.
I'll explain you what's going on there, you have your first div set to float: left; which will float nicely, now your second div isn't floated either left or right so it's taking entire available horizontal space leading the third div to render below.
Demo
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
float: left;
margin-left: 120px;
}
Now am aware of the fact that you want to center align your #logo so in this case, make your #logo div position: absolute;
#nav {
height: 60px;
border: 1px solid #ccc;
position: relative; /* Be sure you use this else your div will fly out in the wild */
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
position: absolute; /* Takes your element out of the flow*/
left: 50%; /* 50% from the left */
margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */
}
Demo 2
You must float also the #logo;
#logo {
float:left;
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
example
#nav {
height: 60px;
border: 1px solid #ccc;
display:table;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
display: inline-table;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
display: inline-table;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
display:inline-table
}
I have some markup:
<div class="container">
<div class="one">column a<br />column a</div>
<div class="two">column b</div>
</div>
Content in the 2 inner divs are of variable height and generated dynamically.
I am just using some standard CSS tricks to give the 2 inner divs the same height:
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 64%;
padding-bottom: 500px;
margin-bottom: -500px;
}
.two{
float: right;
width: 34%;
padding-bottom: 500px;
margin-bottom: -500px;
}
And a fiddle: http://jsfiddle.net/FnWG8/
Problem: While I get a line between the 2 divs, the line extends all the way to the bottom, hitting the container. This is due to not knowing the max height of the 2 inner divs and thus having to use the padding-bottom: 500px and margin-bottom: -500px trick.
I would like to have the line dividing the 2 inner divs, but there should be some space between the bottom of the line and the containing div:
What can be done to achieve this?
try this, I think it can do what you want:
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 65%;
display: inline-block;
}
.two{
border-left: 1px solid red;
float: left;
width: 35%;
display: inline-block;
margin-left: -1px;
}
See if it helps
replace this CSS with current one
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
width: 65%;
margin-bottom: 5px;
}
.two{
float: right;
width: 35%;
margin-bottom: 5px;
}
Try this
CSS
.container{
overflow: hidden;
padding: 20px;
border: 1px solid blue;
}
.one{
border-right: 1px solid red;
float: left;
min-height:10px;
width: 65%;
padding-bottom: 40px;
margin-bottom: -500px;
}
.two{
float: right;
min-height:40px;
width: 35%;
padding-bottom: 500px;
margin-bottom: -500px;
}
change CSS rule labeled ".one" as follows (comment out padding/margin settings)
.one{
border-right: 1px solid red;
float: left;
width: 65%;
/*padding-bottom: 500px;
margin-bottom: -500px;*/
}