I'm new to CSS, and currently I have a right div, and a left div. I'm trying to put one between them and when I do, it'll move the right div slightly down. Here's what I have in CSS right now:
.left {
height:300px;
width:200px;
border:3px solid black;
float:left;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
.center{
height:100px;
width:100px;
background-color:blue;
margin-left:auto;
margin-right:auto;
}
.right{
height:300px;
width:200px;
border:3px solid black;
float:right;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
So what I'm asking is, how can I keep the center div in the middle, and keep both the left and right divs in their place and not move up/down?
You can change the order of the divs:
.left {
height: 300px;
width: 200px;
border: 3px solid black;
float: left;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: aliceblue;
margin-bottom: 10px;
}
.center {
height: 100px;
width: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.right {
height: 300px;
width: 200px;
border: 3px solid black;
float: right;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: aliceblue;
margin-bottom: 10px;
}
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
</div>
From the W3C's Visual Formatting Model:
Content [that comes after the floated element] flows down the right side of a left-floated box and down the left side of a right-floated box.
Since you want the center div to be right of the left-floated div and left of the right-floated div, it should be placed after both divs in the HTML.
Or keep the divs the way they are and adjust the top margin on the right div:
.left {
height: 300px;
width: 200px;
border: 3px solid black;
float: left;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: aliceblue;
margin-bottom: 10px;
}
.center {
height: 100px;
width: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.right {
height: 300px;
width: 200px;
border: 3px solid black;
float: right;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: aliceblue;
margin-bottom: 10px;
margin-top: -100px;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
A negative top margin offsets the effect of the float pushing the box down.
You can also add negative margin to center div.
.left {
height:300px;
width:200px;
border:3px solid black;
float:left;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
.center{
height:100px;
width:100px;
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-bottom: -100px;
}
.right{
height:300px;
width:200px;
border:3px solid black;
float:right;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
There's not enough data about your desired outcome here but why not float all three divs to the left?
Update:
You could use flexbox depending on your browser support.
Put your divs into a container and set the container display to flex.
.container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
If you float left the middle div and give a margin left to the same middle div, It is not always in the middle when screen size is changed. So you have to set middle div position absolute and make it always in the middle for all screen sizes. You can make anything make center by setting position absolute and giving left:0; right:0; margin:auto; css properties. So Make center div position absolute and add left:0px; right:0px; css styles.So add new styles for .center class.
.left {
height:300px;
width:200px;
border:3px solid black;
float:left;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
.center{
height:100px;
width:100px;
background-color:blue;
margin-left:auto;
margin-right:auto;
position:absolute;
left:0;
right:0;
}
.right{
height:300px;
width:200px;
border:3px solid black;
float:right;
border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
background-color:aliceblue;
margin-bottom:10px;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
Related
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Why is btnow moved down? It should be inline with datewrap.
If I remove overflow:hidden from datewrap - it's ok.
But I need overflow:hidden on datewrap.
When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.
for fix use of vertical-align: top; like this:
.btnow {
vertical-align: top;
//Other css
}
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
vertical-align: top;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
text-align really shouldn't be used to position elements. There are far better ways to achieve this.
I don't know why overflow is causing it to "teeter-totter", but below is some code to fix this.
.wrap{
display: flex;
justify-content: center;
/* and if you want to make sure the elements are always aligned vertically */
align-items: center;
/* remember: justify-content will always control the same direction as the flex
** box; so, if the flex box is a row, justify-content will control the horizontal
** spacing and align-items will control the vertical spacing, but if the flex box
** is a column justify-content will control the vertical and align-items will
** control the horizontal. */
width: 100%;
position: fixed;
top: 45px;
left: 0;
background: gold;
}
.datewrap, .btnow {
margin: 0 5px;
display: inline-block;
border: 2px solid red;
}
.datewrap{
overflow: hidden;
}
.btnow{
color: white;
background: green;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}
.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}
.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
position:inherit;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Reference Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.wrap {
position: fixed;
left: 0;
top: 45px;
width: 100%;
text-align: center;
background: gold;
}
.datewrap, .btnow {
display: inline-block;
margin: 0 5px;
border: 2px solid red;
}
.datewrap {
overflow: hidden;
vertical-align: bottom
}
.btnow {
color: white;
}
<div class='wrap'>
<div class='datewrap'>323232</div>
<div class='btnow'>NOW</div>
</div>
Note:
If you are writing code in real-time, you need to minimize your CSS.
I'm trying to align some span element inside a div to it's left border.
This is currently my code:
.bikoret
{
width:40%;
border:1px solid black;
}
.bikoret > .content
{
width:80%;
padding:0;
word-wrap: break-word;
}
.bikoret > .username
{
text-align:center;
padding-left:1%;
padding-right:1%;
position:relative;
left:0;
border-top:1px inset;
}
<div dir="rtl" style="text-align:center; background-color:White; border-top:1px; border-style:inset; margin-top:4px; padding-left:10px; padding-right:10px;" runat="server" id="takzir">
<center>
<div class='bikoret'>
<div class='content'>
this is centered
</div>
<span class='username'>this is aligned to left</span>
</div>
</center>
</div>
How can I fix it? I tried everything by now..
Here is how I would approach this.
First, I define a class for the parent block, .parent, with your current styling and add text-align: center.
For the child element .bikoret, apply display: inline-block which means that
this element is centered within the parent. Important: set text-align: left.
For the child elements of .bikoret, treat each element separately.
For .content, I would set the width to auto and text-align: center to center your text.
For .username, this is simply an inline element, and because of text-align: left on its parent (.bikoret) it sits to the left edge as you want.
.parent {
text-align: center;
background-color: White;
border-top: 1px;
border-style: inset;
margin-top: 4px;
padding-left: 10px;
padding-right: 10px;
}
.bikoret {
width: 40%;
border: 1px solid black;
display: inline-block;
text-align: left;
}
.bikoret > .content {
text-align: center;
width: auto; /* Why 80%? */
padding: 0;
word-wrap: break-word;
background-color: yellow;
}
.bikoret > .username {
padding-left: 1em; /* % padding won't really work here... */
padding-right: 1em;
border-top: 1px inset;
background-color: beige;
}
<div class="parent">
<div class='bikoret'>
<div class='content'>this is centered</div>
<span class='username'>this is aligned to left</span>
</div>
</div>
Note: The center tag is deprecated and should not be used.
adding a display: block; to your class .username will do the job, but here's another ways of doing it
==========
By giving a position: relative; to your container .bikoret along with a height to avoid the border not being covering the .username and a position absolute to .username as well, will do it:
.bikoret {
width: 40%;
border: 1px solid black;
position: relative;
height: 40px;
}
.bikoret > .username {
padding-left: 1%;
padding-right: 1%;
position: absolute;
left: 0;
border-top: 1px inset;
}
Here's an online example
======== Or if this is all about the divider ========
You can do something like this
<div class='bikoret'>
<div class='content'>this is centered</div>
<div class='divider'></div>
<span class='username'>this is aligned to left</span>
</div>
CSS
.bikoret {
width: 40%;
border: 1px solid black;
}
.divider {
height: 1px;
background: #909090;
width: 60%;
}
.bikoret > .username {
padding-left:1%;
padding-right:1%;
text-align:left;
display:block;
}
Here's the example
To center a block level element: set margin-left:auto; margin-right:auto; to itself.
To center an inline level element: set text-align:center; to its parent.
Updated working demo: http://jsfiddle.net/k2xh3xya/1/
HTML
<div dir="rtl" style="" runat="server" id="takzir">
<center>
<div class='bikoret'>
<div class='content'>this is centered</div>
<span class='username'>this is aligned to left</span>
</div>
</center>
</div>
CSS
#takzir {
background-color:White;
border-top:1px;
border-style:inset;
margin-top:4px;
padding-left:10px;
padding-right:10px;
}
.bikoret {
width:40%;
border:1px solid black;
text-align: left;
}
.bikoret > .content {
width:80%;
padding:0;
word-wrap: break-word;
text-align:center;
margin: auto;
}
.bikoret > .username {
padding-left:1%;
padding-right:1%;
border-top:1px inset;
}
If I understand you correctly you want the "this is aligned to left" to be moved all the way to the left? If so then you could simplify your HTML and CSS.
.textOuter {
width:100%;
float:left;
text-align:center;
background-color:white;
border-top:1px;
border-style:inset;
margin-top:4px;
padding-left:10px;
padding-right:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.textInner {
width:40%;
float:left;
position:relative;
left:30%;
border:1px solid black;
}
.textCenter {
width:100%;
float:left;
}
hr {
width:80%;
float:left;
position:relative;
left:10%;
margin:0;
padding:0;
}
.textFull {
float:left;
}
<div class="textOuter">
<div class="textInner">
<div class="textCenter">this is centered</div>
<hr>
<div class="textFull">this is aligned to left</div>
</div>
</div>
Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.
tried with with with marign-left/right:auto, but no result.
html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css
#panels{
padding-top:15px;
margin-left: auto;
margin-right: auto;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}
Try this:
CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
DEMO HERE
Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.
Fiddle here
Of course there was an un-closed div element in your initial code which is fixed now.
So the CSS looks like,
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet::
#panels {
padding-top: 15px;
margin: 0 auto;
background: cyan;
width: 50%;
/* u need this */
height: 500px;
}
#panel-left {
width: 50%;
box-sizing: border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow: hidden;
background-color: gray;
float: left;
padding-left: 25px;
height: 473px;
border: 1px solid #000;
}
#panel-right {
width: 50%;
box-sizing: border-box;
/*min-width:209px;*/
height: 473px;
background-color: white;
float: left;
padding-left: 25px;
border: 1px solid #000;
}
<div id="panels">
<div id="panel-left">left</div>
<div id="panel-right">right</div>
</div>
Hope this helps. Happy Coding :)
I am having some trouble with div positioning. I'm working on a comment system in wich comments can get upvotes and downvotes. For every comment the up/down vote-buttons needs to be left of my comment text, and vertically aligned in the middle of my comment-container div. (regardless of how big the comment is)
At the moment it wont work properly, because the buttons wont get to the middle of the div. (see: http://jsfiddle.net/mcSfe/1838/)
In the testcase i want the leftside to be stretched all the way down, and the red box vertically centered in the middle of the leftside. vertical-align, and display:table-cell, did not brought the right result..
Here is my test html code:
<div class="commentContainer">
<div class="leftside">
<div class="innerleft">
test
</div>
</div>
<div class ="CommentBox">
<p>hello</p>
<p>this is my comment</p>
<p>another line of comment</p>
</div>
and here is my test css code:
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
float:left;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
float:right;
width:200px;
background-color:green;
}
Remove float from .commentbox and .leftside and add display:table-cell with vertical-align:middle
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
width: 50px;
background: gray;
text-align: center;
display: table-cell;
vertical-align: middle
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
width:200px;
background-color:green;
display: table-cell
}
DEMO
LIke this
demo
css
div.commentContainer{
float:left;
border:1px solid blue;
display:table;
}
div.leftside {
display:table-cell;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
width: 25px;
height: 25px;
margin-left:13px;
background: red;
vertical-align:middle;
}
div.CommentBox {
display:table-cell;
width:200px;
background-color:green;
}
Inside of using floats, use inline-block.
JSFiddle
CSS
div.commentContainer{
float:left;
border:1px solid blue;
}
div.leftside {
display:inline-block;
vertical-align:middle;
width: 50px;
background: gray;
text-align: center;
}
div.innerleft {
float:left;
width: 25px;
height: 25px;
margin-left:13px;
background: red;
}
div.CommentBox {
display:inline-block;
vertical-align:middle;
width:200px;
background-color:green;
}
Issues regarding inline-block whitespace can be addressed separately.
im using this CSS for my website footer:
what would be the best way to make it display in the centre of the page. my website is responsive so they automatically go underneath each other when the screen is made smaller but when the screen is larger they are more to the left than the right.
i have created a fiddle here so you can also see the html:http://jsfiddle.net/x4A4B/
any help would be much appreciated
#footer {
width:100%;
min-height:500px;
position:relative;
bottom:0;
left:0;
border-top:4px solid #F36F25;
background-color:#666666;
color:#EEEEEE;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footer-top {
width:100%;
padding-top:10px;
border-bottom:2px #EEEEEE solid;
display:block;
}
#footer-left {
width: 290px;
display:inline-block;
padding: 5px 15px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-middle {
width: 294px; /* Account for margins + border values */
display:inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-right {
width: 270px;
padding: 5px 15px;
display:inline-block;
vertical-align:top;
}
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
}
are you talking about your Copyright label?
if I understood correctly, you need text-align:center; in footer-bottom as in
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}
I think you'll need something like this regarding lay-out:
HTML:
<div class="wrapper">
<div class="left">
Content goes here
</div>
<div class="middle">
Content goes here
</div>
<div class="right">
Content goes here
</div>
</div>
CSS:
.wrapper{
position: relative;
float: left;
left: 20.00%;
width: 60.00%;
}
.left{
position: relative;
float: left;
left: 0%;
width: 32.00%;
}
.middle{
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
}
.right{
position: relative;
float: right;
right: 0%;
width: 33.00%;
}
Of course, you'll have to fill the structure with your content, and modify the margins to completely suit your needs, but I think you'll manage to do that. This example is just to get the idea.
See it in action here: JSFiddle