I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.
Examples serve best
On this page :
http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python
the ascii art should be centered (as it appears) but it should line up and look like "YAML".
Or this :
http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a
the error message should all line up as it does in a console.
First, create a parent div that centers its child content with text-align: center. Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>
If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:
max-width: 250px;
Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?
Assuming the element which is floated and will be centered is a div with an id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
If I understand you well, you need to use to center a container (or block)
margin-left: auto;
margin-right: auto;
and to left align it's contents:
text-align: left;
I've found the easiest way to centre and left-align text inside a container is the following:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Is this what you are looking for? Flexbox...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}
<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>
For those of us still working with older browsers, here's some extended backwards compatibility:
<div style="text-align: center;">
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
Line 1: Testing<br>
Line 2: More testing<br>
Line 3: Even more testing<br>
</div>
</div>
Partially inspired by this post: https://stackoverflow.com/a/12567422/14999964.
use CSS text-align and display properties to see changes accordingly. Margins are also helpful. For me in the case of SweetAlert to center and align left the following code works. For you may be a different scenario.
.format-pre pre {
font-size: 18px;
text-align: left;
display: inline-block;
}
in ts file
showPasswordHints(){
var message = 'Your password mist contain:<br>'+
'1. At least 8 characters in length<br>'+
'2. At least 3 Lowercase letters<br>'+
'3. At least 1 Uppercase letter<br>'+
'4. At least 1 Numbers<br>'+
'5. At least 1 Special characters<br>'+
'5. Maximum 16 characters in length';
Swal.fire({
html:'<pre>' + message + '</pre>',
customClass: {
popup: 'format-pre'
}
,
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
},
icon: 'info',
confirmButtonText: 'Got it',
confirmButtonColor: '#3f51b5',
});
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I came close to the above acceptable result using grid for each row and width for each column.
This is the raw text:
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I turned it into a completely centered grid with 3 columns:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Finally, I defined a specified width for each element. This resulted in a centered block with text that is justified left, except for the title:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Varying the width for each column (based on a counter of its content, for example), could provide better adjustment for edge cases.
THIS works
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.
Currently they have the following CSS:
.myDiv {
width: calc(100% - 67%);
float: left;
}
What else am I missing to accomplish this?
I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM
This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a cleaned up version from the codepen link:
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
I have a sentence that contains job title and location, and I have a limitation of two lines for writing the whole sentence.
The maximum length of the location is 30 characters, but the maximum length of the job title is unknown.
In order to achieve it, I need to make the job title more shorter (with dot dot dot).
These examples work fine:
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
But these examples don't work:
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
The job should be replaced with "Sales Manager and ..."
By this way, the sentence will be exactly two rows.
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
The job should be replaced with "Sales Manager..."
By this way, the sentence will be exactly two rows.
This is my css:
#container {
width:208px;
boder: 1px solid black;
height: 2em; /* two lines limit */
line-height: 1em; /* two lines limit */
overflow: hidden; /* two lines limit */
}
.ellipsis { /* dot dot dot */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
And these are my snippest (I have created the same snippest in two platforms):
1) http://jsfiddle.net/Ht6Ym/3734/
#container {
width:208px;
boder: 1px solid black;
height: 2em; /* two lines limit */
line-height: 1em; /* two lines limit */
overflow: hidden; /* two lines limit */
}
.ellipsis { /* dot dot dot */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<div style="color:red;">It works:</div>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<br>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
<div>--------------------------</div>
<div style="color:red;">It doesn't work:</div>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<br>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
Any help appreciated!
If you set a text-overflow : ellipsis property on your span .ellipsis, you need to set the width of this span.
See this example :
#container {
width:208px;
boder: 1px solid black;
height: 2em; /* two lines limit */
line-height: 1em; /* two lines limit */
overflow: hidden; /* two lines limit */
}
.ellipsis { /* dot dot dot */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width:105px;
display: inline-block;
vertical-align: middle;
border: 1px solid green;
}
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<div>----------------</div>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span><span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
To fix
Set an explicit width on the <span> wrapping the job title.
Set display to inline-block for the span.
Set vertical-align to top for the span... by default this is set to baseline, which is not what you want in this case. See this thread for more info.
More information
In order for text-overflow: ellipsis to work as expected, you need the text to be overflowing its container. Currently, the <span> will adapt its width to whatever text is inside it, so there will never be a situation where the text overflows outside the element.
Simply setting a width on the span, however, will have no effect, as <span> elements are by default inline elements, which have no width. By also setting display: inline-block on the <span>, the content inside the element will get treated as block (which can have a width) while the element itself will still be inline (see here for more info on the display property).
It sounds like you know the maximum length that the job title should be so that should be fine; if there were more variables involved, you might have to calculate the desired width and set it in JavaScript.
Example
I've condensed the code snippet to show this in action.
.job-title {
display: inline-block;
vertical-align: top;
width: 80px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#container {
width:208px;
boder: 1px solid black;
height: 2em; /* two lines limit */
line-height: 1em; /* two lines limit */
overflow: hidden; /* two lines limit */
}
<div id="container">Find more <span class="job-title">Long professional title</span> jobs in <span class="location">San Francisco, California, USA.</span>
</div>
You can create a class for the two span elements and give it display:inline and delete the styling for the .ellipsis class like I did in the following.
#container {
width:208px;
boder: 1px solid black;
height: 2em; /* two lines limit */
line-height: 1em; /* two lines limit */
overflow: hidden; /* two lines limit */
}
.job {
display: inline;
}
<div style="color:red;">It works:</div>
<div id="container">
<span class="job">Find more</span>
<span id="job" class="ellipsis job">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<br>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
<div>--------------------------</div>
<div style="color:red;">It doesn't work:</div>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, california, usa</span>
</div>
<br>
<div id="container">
<span>Find more</span>
<span id="job" class="ellipsis">Sales Manager and driver</span>
<span>jobs in </span>
<span id="location">san francisco, ca</span>
</div>
Here's a nice jsFiddle illustrating the problem
I'm trying to create a titlebar element which...
is only ever 1 line tall
has controls in the top right which are always present
has a title in the top left, which gets truncated with "..." if it's too long
Does anyone know how I'd go about fixing this? I'm a bit stumped.
.item {
border: 1px solid grey;
display: inline-block;
margin-right: 1em;
width: 25%;
}
.titlebar {
background: red;
overflow: hidden;
padding: 0.5em;
text-overflow: ellipsis;
}
.title {
overflow: hidden;
white-space: nowrap;
}
i {
font-style: normal;
float: right;
}
.content {
min-height: 15em;
}
<div class="item">
<div class="titlebar">
<span class="title">My title</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is the most simple use-case - a nice short title, everything works tickety-boo.
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="title">My title which is just right...</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="title">My title which is really far too long for a sensible title to be</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
</div>
</div>
For a solution without fixed sizes change the order of the .title and .controls in the html. This makes sure that when you set float: right on the .controls that the controls are rendered first and will occur on the first line. After this you need to have overflow: hidden, text-overflow: ellipsis, white-space: nowrap and display: block on the .title
I've updated your example to reflect this.
.item {
border: 1px solid grey;
display: inline-block;
margin-right: 1em;
width: 25%;
}
.titlebar {
background: red;
overflow: hidden;
padding: 0.5em;
}
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
i {
font-style: normal;
float: right;
}
.content {
min-height: 15em;
}
.controls {
float: right;
}
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title</span>
</div>
<div class="content">
This is the most simple use-case - a nice short title, everything works tickety-boo.
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title which is just right...</span>
</div>
<div class="content">
This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title which is really far too long for a sensible title to be</span>
</div>
<div class="content">
This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
</div>
</div>
Here's your answer.
I floated the objects and gave them a width of 70% and 30%.
enter link description here
Hope this helps you, and is what you're looking for. if not, add a comment and i'll try to help you.
I am trying to get the horizontal scroll for the div slots. Below is my code.
Slots is the container with 200 px width, which will display 2 slots,
Each slot of width 100 px.
I want to display horizontal scroll when number of slots is more than 2.
Please help me out.
<div class="slots">
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
<div class="slot">
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
</div>
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
</div>
.slots{
width: 200px;
overflow-y: hidden;
display: inline-table;
height: 25px;
overflow: auto;
}
.slot{
width:100px;
height:25px;
display: inline-block;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
Here you go mate...
Fiddle : http://jsfiddle.net/logintomyk/6K6f8/1/
CSS
.slots{
width: 200px;
height: 50px;
overflow-x:scroll;
white-space: nowrap;
}
.slot{
height:25px;
width:100px;
display: inline-block;
cursor:pointer;
margin-left:20px;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
HTML
<div class="slots">
<div class="slot">
<span class="slot-free"> span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> ggvg</span>
</div>
<div class="slot">
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">dfffff </span>
</div>
<div class="slot">
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> sdfdfds</span>
</div>
</div>