I have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:
http://jsfiddle.net/YSLJX/
I've tried these but nothing works...
width: 100%
width: available
width: auto
You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.
Demo Fiddle
HTML
<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>
CSS
#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}
The alternative would be to apply a display:table structure
Related
I have a simple table structure made up of divs:
$(document).ready(function() {
$("button").on("click", function() {
$(".cell").outerWidth(500);
})
})
div {
border: 1px solid black;
box-sizing: border-box;
}
.container {
width: 400px;
height: 100%;
padding: 5px;
overflow: auto;
}
.row {
min-width: 100%;
width: auto;
display: inline-flex;
padding: 5px;
margin-bottom: 5px;
border-color: red;
}
.cell {
flex: 0 0 auto;
border-right: 1px solid black;
overflow: hidden;
min-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="cell">x</div>
</div>
<div class="row">
<div class="cell">x</div>
</div>
<div class="row">
<div class="cell">x</div>
</div>
</div>
<button type="button">Change width</button>
The rows need to be vertically stacked, each having the (unknown) height of their content and be at least as wide as the container. The container has to scroll if the content does not fit. The width of the cells will be interactively changed using JS and the rows should expand to fit the whole content. For this reason, the rows have the following style:
.row {
min-width: 100%;
width: auto;
display: inline-flex;
}
The flex part is needed for the cells and is outside of the scope of this question. Being an inline element, the row will grow with the content in all major browsers but not in Internet Explorer 11. Check out the fiddle and click the button to change the width of the cells. The border helps to visualize the behaviour. The image below shows the expected behaviour (top) and how Internet Explorer interprets it (bottom):
What kind of bug is this (couldn't figure it out from the list of flexbugs) and how can I make it work in Internet Explorer?
In IE11 the behavior is as wanted:
The default flex behavior of flex items has changed. In Internet
Explorer 10, flex items that didn't fit their containers overflowed
the margins of the container or clipped to the margins of the
container. Starting with IE11, these items now shrink to fit their
containers (up to the min-width value, if specified). Use the
flex-shrink property to change this behavior.
https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx
So, the following .cell rules should solve the issue
.cell {
flex: 0 0 auto;
-ms-flex: 0 1 auto; /* overwrites the previous rule only in IE11 */
border-right: 1px solid black;
overflow: hidden;
min-width: 200px;
}
Here's a solution I've come up with... that doesn't use Flex at all.
Updated:
Simplified the CSS to handle the margins and padding better. When you click the button to make the cell grow larger, because of the fixed width of the container, there is no margin between the row and the container.
$(document).ready(function() {
$("button").on("click", function() {
$(".cell").width(500);
})
})
html, body { width: 100%; height: 100%; margin:0; padding:0; }
div {
border: 1px solid black;
/* box-sizing: border-box; */
}
.container {
width: 400px;
padding: 5px;
margin:10px;
background: green;
overflow: auto;
}
.container::after, .row::after {
content: " ";
visibility: hidden;
display: block;
height: 0;
width: 0;
clear:both;
}
.row {
min-width: calc(100% - 22px);
padding: 5px;
margin: 5px;
border-color: red;
background: pink;
float:left;
}
.container > *:last-child {
/* margin: 0; */
}
.cell {
padding: 5px;
margin:5px;
border-right: 1px solid black;
overflow: hidden;
width: calc(200px - 22px);
background: orange;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="cell">x</div>
</div>
<div class="row">
<div class="cell">x</div>
</div>
<div class="row">
<div class="cell">x</div>
</div>
</div>
<button type="button">Change width</button>
The problem:
div {
box-sizing: border-box;
}
.cell {
flex: 0 0 auto;
}
The solution:
If you don't want to change this part of css, i suggest you to avoid setting width, instead of setting min-width
$(document).ready(function() {
$("button").on("click", function() {
$(".cell").css("min-width","500px");
})
})
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
For a responsive site I want a div and an input to sit side by side, and I want the input to take up all the available width and not wrap onto the next line.
I want the div to be a fixed width or determined by its content, I dont want to set a % width for the div.
So I have this:
But I want this:
<div class="cont">
<div class="stuff">Stuff</div>
<input value="something" >
</div>
.cont {
width: 20%;
margin: auto;
border: 1px solid grey;
overflow: auto;
}
.stuff {
background: blue;
height: 200px;
float: left;
width: 100px
}
input {
float: right;
display: block;
}
If you wrap your input in a span and apply this CSS it should work:
jsFiddle example
<div class="stuff">Some text</div>
<span><input type="text" value="something" /></span>
div {
background: #00f;
float: left;
height: 200px;
}
span {
display: block;
overflow: hidden;
padding-left: 10px;
}
input {
width: 100%;
}
If you don't have to support IE9 or lower Use calc() property like this:
input {
width:calc(100% - 100px);
box-sizing:border-box;
}
Check this Demo Fiddle
Complement with box-sizing to keep away issues with border and padding
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div>
<div class="left"></div>
CSS:
.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
.box {
display: flex;
}
.left {
flex: 1; /* grow */
border: 1px dashed #f0f;
}
.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}
<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>
You can use calc() Function of CSS.
Demo: http://jsfiddle.net/A8zLY/543/
<div class="left"></div>
<div class="right"></div>
.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}
.right {
width:200px;
height:200px;
background:red;
float:right;
}
Hope this will help you!!
If you can flip the order in the source code, you can do it like this:
HTML:
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
HTML:
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
#container {
/* set a width %, ems, px, whatever */
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}
.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}
Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.
Example: http://jsfiddle.net/blineberry/VHcPT/3/
If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
.left
{
***width:300px;***
float: left;
overflow:hidden;
}
.right
{
overflow: visible;
***margin-left:300px;***
}
<div class="wrapper">
<div class="left">
...
</div>
<div class="right" >
...
</div>
</div>
Hope this works for you!
There are quite a few ways to accomplish, negative margins is one of my favorites:
http://www.alistapart.com/articles/negativemargins/
Good luck!
set your right to the specific width and float it, on your left just set the margin-right to 250px
.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto
}
.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
If you need a cross browser solution, you can use my approach, clear and easy.
.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}
Use the simple this can help you
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>