I'd like to make an inner div float right of the parent, regardless of the width of the parent. An example of what this looks like is here: http://jsfiddle.net/eqDyy/. That fiddle is just an example of what it should look like. It's done with the exact number of pixels given, but what I'm looking for is a solution that still lets that inner div appear to the right of its parent, even when the parent width changes.
The following is the code used in the fiddle:
HTML
<div id="one">
<div id="two"></div>
</div>
CSS
#one {
border:2px solid #ddd;
width:150px;
height:30px;
}
#two {
border:2px solid #ddd;
width:150px;
height:30px;
margin-left:150px;
margin-top:-2px;
}
Again, please remember that this is just to show what I'd like it to look like, but it isn't a satisfying implementation because it uses specific pixel amounts.
Since percentage-based margins are calculated against the containing block's width, you can set margin-left to 100%.
Example
#one {
border:2px solid #ddd;
width:150px;
height:30px;
}
#two {
border:2px solid #ddd;
width:50px;
height:30px;
margin-left:150px;
margin-top:-2px;
float:right;
}
I changed #two a little to show you the result.
http://jsfiddle.net/eqDyy/3/
Related
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 among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.
I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.
The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.
I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).
Thanks for your attention.
Generally speaking, you want to avoid using absolute positioning for layout purposes.
What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.
http://jsfiddle.net/UfWJh/3/
body {
font-size:10px;
}
/* wrappers */
#header_wrapper {
width:95%;
height:40px;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
#content_wrapper {
display: table;
width:95%;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
/* div1 */
#div_1 {
display: table-cell;
width:70%;
border:1px solid purple;
}
/* div 2 */
#div_2 {
display: table-cell;
width:25%;
border:1px solid purple;
}
#div_2 ul {
list-style-type:none;
}
#div_2 li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.
You then set values for the children, which can either be explicit values or again min and max thresholds.
From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.
I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:
/* div1 */
#div_1 {
position:relative;
width:70%;
top:5px;
left:5px;
border:1px solid purple;
}
/* div 2 */
#div_2 {
position:relative;
width:25%;
top:5px;
right:5px;
border:1px solid purple;
}
#div_2 ul {
position:relative;
top:0px;
left:0px;
list-style-type:none;
}
#div_2 ul li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.
Here's is my answer:
Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)
Make its content display: table
and then display: table-cell on the 2 divs to have even height...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/4/
If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/7/
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 am trying to create a sort of a window, formed by multiple divs. I'm basically putting div after div in my cshtml page, and trying to set their positions in the .css files.
After a considerable effort, I managed to set the divs in their beautiful positions. But as soon as I start to put text, or dom element or whatever inside one of those divs, it changes its position, and pushes other divs, creates a mess.
I somehow managed to keep some by using float, but it is really difficult. Isn't there an easy way to manage the inside elements of a div? Why does the inside elements cause the container div to travel to other places?
Here's the .html and .css code. The divs are empty and positioned correctly. You can simply write "qwe" inside div id="fiyat"> for example and see what I'm talking about.
.html code:
<div id="tablodetay">
<div id="secimler">
</div>
<div id="parcacerceve">
</div>
<div id="resim">
</div>
<div id="ebatsecimvefiyat">
<div id="ebatsecim">
</div>
<div id="fiyat">
</div>
</div>
<div id="urunozellik">
</div>
</div>
.css code:
div#tablodetay div#secimler
{
border:1px solid #000000;
margin:2px;
display:block;
width:706px;
height:100px;
display:block;
}
div#tablodetay div#parcacerceve
{
border:1px solid #000000;
margin:2px;
display:inline-block;
width:86px;
height:400px;
}
div#tablodetay div#resim
{
border:1px solid #000000;
margin:2px;
height:400px;
width:400px;
display:inline-block;
}
div#tablodetay div#ebatsecimvefiyat
{
margin:2px;
height:402px;
width:200px;
display:inline-block;
}
div#tablodetay div#ebatsecim
{
border:1px solid #000000;
height:248px;
width:200px;
margin-bottom:2px;
}
div#tablodetay div#ebatsecim form input
{
float:left;
border:1px solid #000000;
}
div#tablodetay div#fiyat
{
border:1px solid #000000;
height:148px;
width:200px;
}
div#tablodetay div#urunozellik
{
border:1px solid #000000;
height:120px;
width:706px;
margin-top:-2px;
margin-left:2px;
}
You need to define css attributes for each div. To prevent it from changing size or position you need
div ... {
position:absolute;
left: 50px;
top:50px;
width:100px;
height:50%;
}
position:absolute; ignores all other divs and puts your div on the spot you define.
width and height are overruled if the overflow isnt set to none or scroll
The browser will use your width and height as starting point, not end point.
You could also try to set max-width and max-height.