I have a series of buttons on my website that have I want to be at 100% width with a fixed column on the right and a flexible one on the left.
My first thought on how to do this was to use a liquid page layout and just use it on a div instead of the whole page. My results are below:
This image is what happens when the page is displayed so that the link can fit within the box.
If the page is scaled down however, I want the right column (set at 70px) to fill the entire height and align the text horizontally.
The code I am currently using to produce those results is this:
<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
</div>
</div>
</li>
And
li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}
.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}
.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}
.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}
The only other requirement I can think of is that it needs to be wrapped in an <li> tag, but I don't see why that would be a problem.
Since it looks like you are okay using display: table*; values, here's a jsFiddle showing a solution using that.
It sets both .left and .right to display table cell, stops floating .right and instead moves it to be the second element. The issue was that your floating was causing the browser to ignore the height and the display property and just treat it as a floated block.
Also, making sure you are aware, these solutions using display: table*; are compatible IE8+
Although I don't really recommend using .left and .right as class names, the solution really only requires you to set overflow: hidden and word-wrap: break-word for your .left <div>.
.right { float: right; }
.left {
word-wrap: break-word;
overflow: hidden; }
Preview: http://jsfiddle.net/Wexcode/HzpJu/
Related
In my fiddle here, I would like to split the text into 2 lines. The splitting needs to be like in the image below:
The splitting needs to be according to the width of the image.
I tried playing with word-break but it seems that it needs width of the container to be defined.
Is there a way to fix this using CSS only?
jsFiddle
You can use the display: table-caption property to make an item fit the width its container already had without stretching it, and reset the white-space to make sure the lines actually break when it gets too wide:
span.item a{
text-decoration: none;
color: grey;
text-align: center;
display: table-caption;
white-space: normal;
}
Then add a vertical-align: top to your span.item to make them line up nicely.
Fiddle: http://jsfiddle.net/n4c24cg7/4/
Answer inspired by this answer.
) this should do the trick:
div.items div{
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.container {
white-space:nowrap;
}
.item {
width: 1%;
display: inline-table;
padding:0px 15px;
}
a {
height: auto;
overflow: hidden;
text-decoration:none;
white-space:normal;
}
http://jsfiddle.net/n4c24cg7/6/
the padding is only cosmetic, by the way, can be adjusted at will. it might also be worth looking into the 'ellipsis'property to stick to the layout: Setting a fixed HEIGHT on the boxes will chop off the text in this scenario... Depending on what browsers you are counting on and the size of the text/caption coming after the images -- right now they align with the highest ;) hope this helps
You can find solution from here
<div class="img">
<img src="image/path/img" alt="">
<div class="desc">Add a description of the image here blah blah blah</div>
</div>
css
div
{
width:100%;/*or specify width*/
}
div.img {
width:100%;
}
div.desc {
margin: 5px;
padding:5px;
word-wrap:break-word;
}
demo
I made display: inline-block working here. As you can see, checkbox and text were aligned horizontally.
But it does not work on this fiddle:
Actually I have three problems to solve here:
Make the checkbox and text: Swing Equipment Also inline with the checkbox.
In the right content, I have a button Swing System and I want it to be right aligned.
As you can see, I have left and right contents. They are mostly 50% of the width, I want them to be centered. Currently it is not.
Code snippet:
HTML
<li>
<input type="checkbox" class="swing_checkbox" id="swing_equipment" /> <span id="swing_label_small">Swing Equipment Also</span>
</li>
CSS:
#swing_label_small, #swing_equipment {
display: inline-block;
font-size: 0.8em;
}
Make the checkbox and text: Swing Equipment Also inline with the checkbox.
The checkbox has a width set to 90% by this css declaration...
input {
position: relative;
width: 90%;
}
change that to...
input[type=text] {
position: relative;
width: 90%;
}
In the right content, I have a button Swing System and I want it to be right aligned.
First thing I noticed is you are placing a button inside a ul...that will not validate as proper html. I would suggest you to move it out of the ul because is not semantically correct. But working with what you have...adding text-align:right to the ul and then adding text-align:right to the child li should work...
#right_content{
text-align:right;
}
ul#right_content > li {
border: 0px solid green;
margin: 0;
width: 100%;
position: relative;
text-align:left;
}
As you can see, I have left and right contents. They are mostly 50% of the width, I want them to be centered. Currently it is not.
I'm not too sure what you mean...please clarify so I can modify my answer
Here's the changes I made.
For 1) added CSS to checkbox as you make all input widht:90%;
input[type="checkbox"]{
width:auto;
}
For 2) added a div field for clear both purpose. Then make the button float right.
HTML:
<button type="button" class="swing_btn">Swing System</button>
<div class="clear"></div>
CSS:
.clear{ clear:both;}
#right_content > button
{
float:right;
}
3)As your are using ul as structure. there are padding that been use for ul.
Removed the inner ul padding that ruined the structure.
ul li ul {
padding:0px;
}
Gave table a margin to make it center:
.swing_grid, tr, td {
border: 1px solid gray;
border-collapse: collapse;
margin: 0 auto;
}
And finally let the content align center:
ul.content {
border: 0px solid gray;
box-sizing: border-box;
width: 49%;
position: relative;
list-style-type: none;
display: inline-block;
vertical-align: top;
text-align: center;
}
Here's my FIDDLE work.
1) For the checkbox and text issue: apply width: auto; to the checkbox:
.swing_checkbox {
width:auto;
}
The following was giving the checkbox a width of 90%, which is why the text was pushed down to the next line.
input {
position: relative;
width: 90%;
}
2) Something like this will work, I'm using inline styles here because I am lazy. Feel free to tidy that up yourself.
<ul class="content" id="right_content">
<li style="text-align: right;"> <button type="button" class="swing_btn">Swing System</button></li>
...
...
...
3) Use text-align:center; on the container, and then apply text-align:left; to it's inner elements. This will center block level elements with a percentage defined width. There are other ways to do this, however, if you're interested in researching them.
.swing_wrapper {
text-align: center;
}
ul.content,.swing_title, {
text-align: left;
}
4) You should also take a look at some debug tools such as Firebug, it makes debugging issues like this a lot easier with it's Inspection tool.
I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
I have a footer to posts on a blog, the posts are of dynamic with.
There are some elements in the footer that are left-aligned, one that's right-aligned and one between them that should fill the remaining space.
I thought I could use
text-overflow:ellipsis
which works if I set it to a fix width, but at the moment, the space-filling element just gets too large so the last element breaks to a new line.
Adding
white-space:nowrap;
to the outer container didn't help.
Also it'd be a nice bonus if the space-filling element would always fill the remaining space, even if it's content is not large enough.
Here is my fiddle http://jsfiddle.net/MFxk5/ , the space-filling element is the
<a href="c" class="c">...
Thanks to everyone for helping out! Maybe some will mark this as duplicate, but I think the combination with text-overflow:ellipsis makes this unique - I really searched for a solution.
Sounds like you want a fixed-fluid-fixed layout here is how you do it in pure css. If its not what you mean let me know. a Fiddle to view: http://jsfiddle.net/rE2NC/ just move the viewport left and right and you will see how the middle expands contracts as the width does.
HTML
<div class="FooterContainer">
<div class="Footer">
<div class="Left">Left</div>
<div class="Middle">Middle</div>
<div class="Right">Right</div>
</div>
</div>
CSS
.FooterContainer {
width:100%;
}
.Footer {
padding-left:200px; //or whatever width you want the .Left to be
padding-right:200px; //or whatever width you want the .Right to be
}
.Left {
width:200px; //Should match the padding-left of .Footer
margin-left:-200px; //Should be the negative of the width
float:left;
}
.Right {
width:200px; //Should match the padding-right of .Footer
margin-right:-200px; //Should be the negative of the width
float:left;
}
.Middle {
width:100%; //This fills the rest
float:left;
overflow:hidden; //use this to make sure text dont flow out
}
jQuery Solution
I started with a jQuery assisted solution.
The CSS looks like:
div {
width: 100%;
overflow: auto;
}
a {
border: 1px solid gray;
margin: 3px;
height: 50px;
float: left;
}
.c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d {
float: right;
}
and the jQuery function:
$("div").each(function(){
var innerWidth = 0;
$(this).find("a").not(".flex").each(function(){
innerWidth += $(this).outerWidth(true);
});
var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */
$(this).find(".flex").width(flexWidth);
});
There is a hard coded constant that represents the left/right padding and border on the flexible with div (a.c in your example), and for some reason, there is a 1px adjustment to keep the floats on a single line. (Not quite sure the origin...).
Fiddle: http://jsfiddle.net/audetwebdesign/HmvsN/
Mix of Fixed Widths with Floats
I made a slight adjustment to the HTML as follows (move a.d in front of a.c):
<div class="ex2">
First column
Second column
Last column
Very long text...
</div>
and use the following CSS:
.ex2 a {
border: 1px solid gray;
margin: 3px;
height: 50px;
}
.ex2 .a {
width: 90px;
float: left;
}
.ex2 .b {
width: 90px;
float: left;
}
.ex2 .c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin: 3px 100px 3px 199px;
}
.ex2 .d {
width: 90px;
float: right;
}
Essentially, float the left two elements and the right one such that it wraps around the wider one. The width of the wider element has left/right margins to accommodate the floated elements.
Overall, both approaches have merit, but it seems to be a lot of work for what we are getting...
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?