I have some html as given in code below.
I am using display:table and display:table-cell for laying out the divs in a table-like manner without using html table. This works fine except that the widths of left and right cells are much bigger than the width of their contents.
A demo for this question is at following URL: http://js.do/sun21170/87371
Question: What CSS I can use to make the left and right cells automatically resize to their contents? I do not want to specify the widths of these cells.
I tried to solve this problem by setting the center div width to 100% which did what I was after but then the margins of left and right divs are not respected. So may be there is a better solution that I am missing!
HTML Markup
<script></script>
<style>
#rgcmd {
width:100%;
display:table;
position:relative;
border:solid 1px green;
}
.leftCell {
margin-right: 5px;
height:100%;
display:table-cell;
vertical-align:middle;
border-right:solid 1px red;
}
.rightCell {
margin-left:
5px;height:100%;
display:table-cell;
vertical-align:middle;
border-left:solid 1px red;
text-align:right;
}
</style>
<div id="rgcmd">
<div class="leftCell">Go Left</div>
<div style="display:table-cell; vertical-align:top;">
<span id="status">Your status is offline</span>
</div>
<div class="rightCell">Go Right</div>
</div>
Add white-space: nowrap to the left and right cells and width: 100% to the center cell:
#rgcmd {
width: 100%;
display: table;
position: relative;
border: solid 1px green;
}
.leftCell {
padding-right: 5px;
height: 100%;
display: table-cell;
vertical-align: middle;
border-right: solid 1px red;
white-space: nowrap;
}
.rightCell {
padding-left: 5px;
height: 100%;
display: table-cell;
vertical-align: middle;
border-left: solid 1px red;
text-align: right;
white-space: nowrap;
}
.centerCell {
width: 100%;
display: table-cell;
vertical-align: top;
}
<div id="rgcmd">
<div class="leftCell">Go Left
</div>
<div class="centerCell">
<span id="status">Your status is offline</span>
</div>
<div class="rightCell">Go Right
</div>
</div>
Related
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
Due to my website designed, i need to join two divs, and they need to look as one.
So no borders, and everything white, they look the same div.
Now i need to add a shadow, and things get complicated!
So far i achieve this, but i cant figure it out how to make it look nice!
#one {
height: 300px !important;
width: 300px !important;
float:left;
box-shadow:-1px 1px 1px 0px #888888 !important;
}
#two {
float:right;
height: 300px !important;
width: 300px !important;
box-shadow:1px 1px 1px 0px #888888 !important;
}
#wrapper{
width:600px;
}
<div id="wrapper">
<div id="one">The two divs are</div>
<div id="two">next to each other.</div>
</div>
I need to remove that line in the middle, and also at the bottom you can se a little gap.
Please help!
As has been mentioned in the comments, you should be looking to apply the box-shadow on the container and not on the inner elements. That would allow to display as if the shadow effect was applied on a single element. I guess that is what you are looking for. See the snippet below.
#one {
height: 300px;
width: 40%;
float:left;
}
#two {
float:right;
height: 300px;
width: 40%;
}
#wrapper {
width:100%;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Left-floated</div>
<div id="two">right-floated.</div>
<div class="clear"></div>
</div>
Again, if you are looking to make the div's perfectly align next to each other without any blank space in between, you can remove the width property from both the inner and outer elements and add display: inline-block;. This would ensure that the outer as well as the inner containers
only take up as much space as needed horizontally. See this below :
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">The two divs are </div>
<div id="two">next to each other.</div>
<div class="clear"></div>
</div>
The below snippet is just an example of how the outer container would expand based on the content it contains:
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Just random text to increase width The two divs are </div>
<div id="two">STILL next to each other.</div>
<div class="clear"></div>
</div>
Hope that helps!!!
I have 3 divs displayed inline-block that horizontally align:
div {
background:blue;
height:200px;
width:30%;
margin:0px;
padding:0px;
border:10px solid red;
display:inline-block;
box-sizing:border-box
}
When I add a text element into one of the divs, it's bumped down *(unless the text is position:absolute;).
What is the reason for this?
http://jsbin.com/suweba/2/edit
You need to add vertical-align: top to your div using CSS. The default property of vertical-align is baseline which is why your div with the content moves down to the bottom.
Here's a jsBin demo.
div {
background: blue;
height: 200px;
width: 30%;
margin: 0px;
padding: 0px;
border: 10px solid red;
display: inline-block;
vertical-align: middle;
box-sizing: border-box
}
#b {} text {
/* position:fixed; */
color: white;
font-size: 20px;
}
<body>
<div id="a">
<text>hello</text>
</div>
<div id="b"></div>
<div id="c"></div>
add vertical-align: top when using display: inline-block. The natural position of inline-block is baseline.
JSBIN
I have this container div with two elements:
<div id="container">
<div id="right">Some, list, of, words, that, I, use</div>
<div id="left">Person Name</div>
</div>
And I want to make the #right div use up the space that is left by the #left div and hide the overflow.
Please also note that the #left div width is variable.
I came up with this css so far:
#container {
width: 250px;
border: 1px solid black;
padding: 10px;
}
#left {
white-space: nowrap;
border: 1px dotted #ccc;
display: inline;
}
#right {
text-overflow: ellipsis;
overflow: hidden;
border: 1px dotted #ddd;
white-space: nowrap;
display: inline;
float: right;
}
But the #right div still shows all text and end up on the following line, like displayed below:
I played with making the #right div not float, adding width: 100% but nothing seems to work...
Does anyone know how I can make both be displayed on the same line, but making the #right div have its overflow hidden?
jsFiddle link: http://jsfiddle.net/y4xnx/13/
Edit: fixed my explanation of which divs should do what.
It would help to put #left before #right:
<div id="container">
<div id="left">Person Name</div>
<div id="right">Some, list, of, words, that, I, use</div>
</div>
Then a few changes in the css should do what you're wanting:
#left {
white-space: nowrap;
border: 1px dotted #ccc;
float: left;
margin-right: 5px;
}
#right {
text-overflow: ellipsis;
overflow: hidden;
border: 1px dotted #ddd;
white-space: nowrap;
}
Example: http://jsfiddle.net/grc4/MvXuN/
I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/y4xnx/20/
HTML:
<div id="container">
<div id="left">Person Name</div>
<div id="right">Some, list, of, words, that, I, use</div>
</div>
CSS:
#container {
width: 250px;
border: 1px solid black;
padding: 10px;
white-space:nowrap;
overflow:hidden;
}
#left {
border: 1px dotted #ccc;
display: inline-block;
}
#right {
display:inline-block;
border: 1px dotted #ddd;
}
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.