I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
Related
I am trying to design a responsive web page so I am trying to avoid using pixel values. But sometimes, for example when trying to limit the width of a text containing div, I cannot use percentages since the width of the contianer is not known and going to be determined by the content inside. And due to the way CSS works, I cannot give a width value with reference to the container div higher in the html hierarchy.
So I thought of using vw, but since I am using min-width, max-width values on the body, it will not work properly outside those values. What can I use instead to refer to the body width?
Edit:
Since an example was asked for, I provided below an example whereby percentage did not work. Trying to make the span width 10% of the outermost container with no luck. Here is the jsfiddle link also: https://jsfiddle.net/68ha60p6/
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
<div style="width:100%; height:60px;">
<div style="float:right; height:100%;padding-right:1%">
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;">
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span>
</button>
</div>
</div>
I cannot give a width value with reference to the container div higher
in the html hierarchy.
You absolutely can.
Have a look at the example below.
You'll see that the width of the parent container is not explicitly stated (it's determined by the content of the first subcontainer). Regardless, the second subcontainer's width is 50% of its parent's.
div {
margin: 6px;
padding: 6px;
}
.container {
display: inline-block;
border: 1px solid rgb(255,0,0);
}
.subcontainer1 {
border: 1px solid rgb(0,0,255);
}
.subcontainer2 {
width: 50%;
margin: 6px;
border: 1px solid rgb(0,255,0);
}
div p {
line-height: 60px;
}
<div class="container">
<div class="subcontainer1">
<p>I am a long sentence and I will define the width both of this sub-container and of the overall parent container.
</div>
<div class="subcontainer2">
<p>I am half the width of the overall parent container.</p>
</div>
</div>
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I created a wrapper div for my site to contain the entire contents of the body, but for some reason, I have extra white space above the wrapper div. I can't exactly pinpoint why this is happening; I put zero padding and zero margins for both the body and the wrapper div:
<body onload="init()" style="margin:0px; padding:0px;">
<div id="wrapper" style="background-color:#000000; margin:0px; padding:0px;">
<div id="pagecontent">
<nav id="navlogo" style="margin:10px;">Some Navigation Stuff
</nav></div></div></body>
(The Page Content Div holds all of the webpage's elements and centers them.)
I also have this CSS for the page content:
#pagecontent
{
margin: 0px auto;
width: 1044px;
box-shadow:inset 0px 0px 15px black;
background-color:#000000;
}
I tried using negative margins of -10px on the wrapper div, and that worked out; is that the only way to get rid of this white space?
<nav id="navlogo" style="margin:10px;">
This margin includes margin-top:10px - that is the issue.
margin:10px; = margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;
to get around this you could change it to:
margin:10px;margin-top:0;
or to make the navbar go to the top just change margin:10px; to padding:10px;
It seems there are several posts on this topic but none of the solutions have worked for me. Perhaps someone can figure out what I'm missing.
I have three boxes floated next to each other like columns. Due to certain background images etc., each box is composed of two divs. The outer div has the class "calloutbox" and is floated left. Inside of "calloutbox" is another div called "callout-content" that holds the dynamic content (I'm using wordpress).
So far I have not been able to get the boxes to expand to fit their dynamically generated content. They collapse if I set height to 100%. I've tried a dozen combinations of overflow:hidden, clear:both etc. with no luck.
<div id="callout-container">
<div class="calloutbox">
<div class="callout-content">Dynamic content goes here</div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
<div class="calloutbox">
<div class="callout-content"></div>
</div>
</div>
Here is the css:
.calloutbox {
min-height:310px;
width:30%;
float:left;
margin:0 0 0 25px;
position:relative;
background-image:url(images/shadow.png);
background-repeat:no-repeat;
background-position:right bottom;
display:block;
}
.calloutbox:after {
clear:both;
}
.callout-content:after {
clear:both;
}
.calloutbox:nth-child(1) {
min-height:200px;
}
/*The content inside the three boxes on the homepage */
.callout-content {
height:100%;
width:90%;
right:8px;
border:1px solid #e6e4e4;
bottom: 8px;
background-color:white;
position:absolute;
background-image:url(images/yellow-title-bar.png);
background-repeat:repeat-x;
background-position:top;
padding: 0 10px 10px 10px;
}
Here's the code in a jsfiddle if that helps anyone: http://jsfiddle.net/daniec/r8ezY/
Thanks in advance!
They are not floated, they are absolutely-positioned.
Absolutely-positioned elements are no longer part of the layout. They no longer have parents are far as layouts are concerned. Therefore, you need to specify their sizes in pixels rather than percentages. Percentages are relative to the wrappers they no longer have.
Working with floats can be a pain. As an alternative, have you tried using to use inline-block:
display: inline-block;
It behaves like an inline element, but an be styled like a block level element. It does not work in IE6 though.
.calloutbox {
white-space:nowrap;
}
Should do the trick. otherwise try creating a jsfiddle, so we can run your code
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>