I have a parent div, Inside that div I have two levels of children div as follow,
<div class="grandParant">
<div class="parant1">test</div>
<div class="parant2">
<div class="child">Hello world this is a long test string</div>
<div class="child">12</div>
<div class="child">4545</div>
</div>
</div>
from the above sample code, I need to show the entire first "child" class content(Hello world this is a long test string) without any break, ie in a single line. The width of the "parant2" div should also be incremented with respect to the child width. So how could this be done with css? I am not posting my css since it is a little bit lengthy, but you can see it in jsfiddle.
EDIT
my expected output is more like the alphabet 'L'
| test |
| Hello world this is a long test string |
| 12 |
| 4545 |
my jsfiddle
If you remove the max-width take parant1 outside of it's grandparent, you'll get your desired result of non-wrapping:
DEMO: http://jsfiddle.net/9Sha7/18/
You can do that by removing "max-width" ...
Where ever if you give "max-width" it only get upto that extent only,beyond that width it will break the lines
Put css only like
min-width:100px;
Here is fiddel http://jsfiddle.net/9Sha7/8/
take out the padding
.grandParant{
margin:0 auto;
float:left;
min-width:100px;
max-width:120px;
height:150px;
position:relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#cccccc;
font-size:11px;
cursor:pointer;
}
.parant1{
width:auto;
margin-bottom:22px;
text-align:center;
background:blue;
}
.parant2{
text-align:left;
width:auto;
background:#f3f3f3;
}
.child{
width:100%;
position:static;
background:green;
}
}
Just get rid of all the width attributes and the max-width, then it should be fine according to your requirements: http://jsfiddle.net/9Sha7/13/
Remove max-width from your .grandParent class and give white-space:nowrap; to your .child class.
Working Fiddle
Related
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
I want to achieve the following effect in CSS:
I use CSS table-cell with :before and :after pseudo-elements so that they auto-adjust their width in one row. In other words, I want the text container have the width of the text (with some padding) and the pseudo-elements fill the rest of the area. This means that I can't use 1px background-image positioned top, because each word has a different width.
Here's the fiddle.
HTML
<div id="container">
<div id="box">
<h2 id="header">UPDATES</h2>
</div>
</div>
CSS
#container {
background:url("http://lorempixel.com/output/abstract-q-g-640-480-9.jpg") center center no-repeat;
padding-top:50px;
height:400px;
width:50%;
margin:0 auto;
}
#box {
margin:0 auto;
width:50%;
display:table;
}
#header {
color:#fff;
font:14px Arial;
font-weight:500;
line-height:10px;
height:10px;
display:table-cell;
padding:0 10px;
width:auto;
text-align:center;
}
#box:after, #box:before {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
height:10px;
width:50%;
}
#box:after{
border-left:0;
}
#box:before{
border-right:0;
}
However, it doesn't work in Opera so, I need to find a different technique to achieve the same effect. I'd prefer to avoid using HTML tables and any js. Can you provide any suggestion?
In this example I got rid of the psuedo-elements and sandwiched the header tag between two that were styled as a table to get the line effect. Although this is done using a CSS table the similar concept should be applicable to an html table.
<div id="before" ></div>
<h2 id="header">UPDATES</h2>
<div id="after"></div>
styled like so....
#before {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
border-right:0;
height:10px;
width:50%;
}
#after {
content:"";
display:table-cell;
border:1px solid #fff;
border-bottom:0;
border-left:0;
height:10px;
width:50%;
}
http://jsfiddle.net/SteveRobertson/9SBXn/12/
After several tests, I found out that Opera needs a more detailed implementation when using CSS tables with pseudo-elements. In other words, it's not enough to set the parent container as display:table and children as display:table-cell.
You need to set the whole hierarchy, meaning that:
The parent needs to be set as:
display:table
The first children needs to be set as:
display:table-row
And finally set the other children as:
display:table-cell
If you set your CSS ignoring display:table-row like I did, Opera sets the children elements (after display:table-cell) as table-row and not as table-cell, thus the width of each child extends to 100% of the parent and behaves like a row. Setting the table hierarchy like in HTML tables (table > row > cell) you get the expected format.
This seems to affect only Opera, since all other browsers do not try to fix the hierarchy of the CSS table.
Here's the demo (check in Opera as well)
Instead of CSS tables, you could use inline-blocks with percentage width and max-width so that the containers don't fall in a new line.
I'm not sure exactly how to work what I'm trying to accomplish so bear with me...
I'm trying to set the width of an element, based on the width of a proceeding element. visually it would look like this:
container element
--------------------------------------------
| | |
| | |
|<--auto width for div1-->|<--div2 200px-->|
| | |
| | |
--------------------------------------------
So, essentially, div2 is set to float on the right of the page, and div1 should span up to the right edge of div2 automatically
I've started a fiddle at: http://jsfiddle.net/yUvJs/
Any help would be greatly appreciated... thanks in advance...
Just use tables. Get rid of the float, set the two box divs to display:table-cell and the container div to display:table. The first box should then adjust its width automatically based on the width of the second box.
Fiddle example
You can use the calc() function which is new in CSS 3, to allow the first <div> span 100% width of its containing block minus the 200px of the second <div> - just remember to account for the 2px of border on each child element:
#box1 {
display:inline-block;
border:1px dashed blue;
height:100%;
opacity:.8;
background:#ccc;
width: -webkit-calc(100% - 204px);
width: -moz-calc(100% - 204px);
width: calc(100% - 204px); /* 2px + 2px dotted border */
}
Example
I suggest implementing this in JavaScript. You would do something like this in JavaScript:
var cont = document.getElementById("container");
var box2 = document.getElementById("box2");
var box1Width = cont.offsetWidth - box2.offsetWidth;
document.getElementById("box1").style.width = box1Width + "px" ;
I implemented this on your fiddle with a couple minor changes to demonstrate that it works. Check it out: http://jsfiddle.net/yUvJs/26/
I'm not sure of all your requirements, but if you can reverse the html order:
<div id='container'>
<div class='box' id='box2'></div>
<div class='box' id='box1'></div>
</div>
And remove the display: inline-block (which should not be needed when floating), but apply a overflow: hidden (and its magic) to the box1 then you get what you want as seen in this fiddle.
I know this question is old, but for the above case, can use flex:
HTML:
<div id='container'>
<!-- If you want to give id/class is up to you, css selectors can do it pretty well too for generalization purposes -->
<div>...data...</div>
<div>...data...</div>
</div>
CSS:
#container{
display:flex; flex-direction:row;
width:700px; border:1px solid black; height:300px;
}
#container > div:nth-child(1){
flex:auto;
border:1px dashed blue; height:100%; opacity:.8; background:#ccc;
}
#container > div:nth-child(2){
flex:initial;
border:1px dashed red; width:200px; height:100%; opacity:.8; background:#eee;
}
Try it, and see how display flex solves your problem much more elegant
I've got this simple markup:
<div id="parent">
<div id="static">
Hello Random
</div>
<div id="max">
100% of the rest
</div>
</div>
I want that the div with ID max should be 100% width as its parents minus the width of the element with ID static. static contains just a single textnode with some random words that I don't know.
I have tried this CSS but don't know exactly how to solve it:
#parent{
width:100%;
border:1px solid #FF0000;
float:left;
}
#static{
float:left;
border:1px solid #00FF00;
}
#max{
float:left;
width:90%; // It's not the same as minus so this will just fail...
}
This is my jsFiddle that I have tried with:
http://jsfiddle.net/WnceY/
I want to use pure CSS no JS. In this moment I don't care about IE either.
Just don't float everything.
http://jsfiddle.net/WnceY/4/
Only the #static needs to float. Then the rest will take care of itself.
I solved it with this CSS:
http://jsfiddle.net/WnceY/9/