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/
Related
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
I know the answer is very simple, it's probably one little CSS property, but I've tried to find the solution without asking it here, no luck..
There are two div containers within a div container, and they aren't playing nice.
The one is positioned to float right in the upper righthand corner of the parent div, and it won't let any other container float to the right of it.
I tried display:inline and display:inline-block but no luck...
Here's the code, though something tells me the answer is so easy you won't need it!:
The parent div, the upper righthand corner div, and the poor div trying to float right:
#um-home-section4 {
width:100%;
height:300px;
background-color: green;
}
#um-title-right {
float:right;
width:500px;
height:50px;
margin-right:20px;
margin-top:20px;
background-color: fuchsia;
}
#take-me-there {
float:right;
margin-top:240px;
margin-right:0px;
height:50px;
width:100px;
background-color: gray;
}
<div id="um-home-section4">
<div id="um-title-right"></div>
<div id="take-me-there"></div>
</div>
You just need to change the order in your HTML :
<div id="um-home-section4">
<div id="take-me-there">
</div>
<div id="um-title-right">
</div>
</div>
See this demo http://jsfiddle.net/Rk4mr/11/
I sometimes get confused with divs when I try and build a little more complicated layout than normal.
I have made a quick example showing what my current problem is:
EDIT: UPDATED jsFIDDLE
Sorry, it's a little messy, but I'm just trying to get it to work. As you can see, I have forced a height on one of the vertical lines (but thats ok. that line is supposed to be fixed height). The vertical line I have problems with is the one between "Pictures for download" and "videos for download"
http://jsfiddle.net/GLjND/
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
I have lots of div's, and I guess my problem lies within some parent somewhere, but I cant figure it out.
Basically I have a wrapper,and I have 2 areas of content. In this example, those are "first" and "third".
The "second" is a vertical dotted line that I want to stick in-between these to areas, and the height of this div (which contains a vertical dotted image with repeat-y) should matsh the height of the wrapper, which in turn is defined by the largest of the two other divs ("first" and "third").
How would I do this?
Thanks in advance! :)
Here you go.
http://jsfiddle.net/GLjND/3/ (the yellow background is just so you can see the new div)
Just give the divs
display: table-cell
and you're done.
Here it is - fiddle
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
body{
padding:0;
margin:0;
}
#wrapper{
width:500px;
height:auto;
background:red;
}
#first{
display: table-cell;
width:230px;
height:300px;
background:blue;
}
#second{
display: table-cell;
background:white;
border-left: thick dotted #ff0000;
}
#third{
display: table-cell;
width:270px;
height:350px;
background:green;
}
When you are using float property, i recommend you to set overflow:hidden to the parent div
#wrapper{
overflow:hidden;
}
And for the #second u have set the height to 100%, for this to work u should fix an height for the parent div
#wrapper{
height:400px;
}
Here is the Jsfiddle
Hope this will a good solution and will be more informative
Just give the CSS property:
overflow : hidden
display : table-cell
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
I have a rule like this:
body{border:1px solid gray;}
#middle{
float:left;
margin-left:3%;
margin-top:20px;
width:41%;
border-top:solid #aaaaaa 1px;
}
.message-content{
padding:0 10px 0 10px;
float:left;
}
My HTML is like:
<html>
<body>
<div id="middle">
<div class="message-content">Loris ipsidum</div>
<div class="message-content">Loris ipsidum</div>
<div id="clear"></div>
</div>
</body>
</html>
I tried to duplicate it in JSFiddle, but I wasn't able to. Basically, what's happening is, after I get many message-content divs, the border defined by the body rule is passed. It basically looks like there's a line right through the middle of the content. Any ideas?
I'll try to get a working example up.
Since your #middle elements are floating, they don't count in the height of the parent (in this case the body), so the body is only taking up the height of the window.
You don't appear to have defined a clear style for your #clear element. Even so, the clear element should be after, not inside, the floating element.