If I have two divs, and in the first div there is some image tag with a width of 100% so it fits the screen like
<div id="first"><img src="" width="100%"></div>
<div id="second">Some Text</div>
How do I make it so #second is positioned under #first? It should work by default, but because the height of #first is not set, #second is being positioned at the same place #first is positioned.
It indeed should work by default.
You either
Made your divs inline-blocks
Set their position to absolute
floating them to the left
Most likely it's the second scenario. Set their position to static.
Floating and/or giving the first an automatic height might do the trick:
#first {
float: left;
overflow: hidden; /* or height: auto perhaps*/
}
#second {
float: left;
}
Edit: too late, problem solved while I typed :)
We really need to see your CSS, but compare your values to these; if they're set to anything else, that may be the problem.
#first {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
#second {
display: block;
float: none;
position: relative; /* or possibly position: static; */
}
What about the image? Any CSS rules assigned to that? Is there a div around these two divs with a max-height?
Related
Really hoping someone can help a z-index novice.
I'm trying to position a div on top of everything else on my page:
http://www.designbyantony.com/bipf/index.html
The div (you can probably see the problem) is the roun blue circle with 'March 6-8 2015'.
I'd like it to sit on top of everything else properly - ie: run over the nav bar a bit and chip over the area which has the repeating 'arch' design.
I've tried using z-index but I'm obviously going wrong somewhere.
CSS is at
http://www.designbyantony.com/bipf/styles.css
Can anyone help me?
Change into your CSS like that.Remove the both position:relative from CSS
#page_content {
width: 970px;
margin: auto;
height: auto;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
/* position: relative; */
background-color: #FFFFFF;
overflow: hidden;
/* position: relative; */
z-index: 2;
}
and again change your CSS of #dates.remove left position left:1046;top: 171px; and put there right:0
#dates {
position: absolute;
left: 1046px;
top: 171px;
z-index: 10000;
height: 140px;
width: 140px;
display: block;
background-color: none;
}
Remove overflow: hidden in the #page_content in styles.css at Line 245:
#page_content {overflow: visible;}
Or if you would like to have clearing after the #page_content, you can use something like this:
#page_content:after {display: block; clear: both; content: " ";}
Reason: The parent of #dates is been cropped by #page_content, which has overflow: hidden, that doesn't allow contents to be hanging.
it's not a z-index problem. your div id="dates" actually cropped by your div id=page_content
Change overflow from hidden to visible for #page_content in styles.css
Z-index works, it's overflow:hidden in combination with position:relative for #page_content that causes clipping. The easiest way to fix this, IMO, is to add another div wrapper inside #page_content and to move overflow:hidden to this inner div. Without position:relative, overflow:hidden will not clip absolutely positioned descendants of this div, and the page will look as planned.
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
I've read almost every article on this forum about divs and growing height with its content. I don't understand what I'm doing wrong and can't figure it out. Probably it's an easy thing, but I just don't see it any more.
I tried the following CSS but can't get it working:
clear:both;
float: left;
overflow: auto;
overflow: hidden;
none of this all has the desired output.
I posted my code on jsfiddle: http://jsfiddle.net/eAVy3/
You will see that my footer (in red) is at the top in stead of on the bottom. The only way tho get something that looks like it is to give the id page_container a height. But that will be a fixed height and doesn't grow with the content. What to do to get this right?
Working fiddle here: http://jsfiddle.net/eAVy3/3/
Absolute positioning (absolute positioning takes the div out of the normal flow of the document, which means it can't effect other things on the page like the footer)..
You need to float your divs instead:
#kolom_links {
float: left;
margin-left: 100px;
}
#kolom_rechts {
float: left;
margin-left: 70px;
}
Now because both divs inside #page_container are floating, you need use clearfix css:
Add class clearfix: <div id="page_container" class="clearfix">
Then add this clearfix to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You should reconsider making the position absolute;
making the position absolute is puttinf the element out of flow so they don't occupy any height or width of the document.
change to posiion : relative ; and you will start to figure it out
Update 2
try this :
#kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}
It's a simple CSS issue: a container doesn't wrap around floated contents by default. The easiest way to make it do so it with,
.div_container {
overflow: hidden;
}
I have a div that contains two ul. I'd like to position the first ul on he right and the second ul on the center.
I cannot use absolute positioning since it makes me other problems in nested elements and in mobile view.
This is what I've done:
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w {
text-align: center;
display: inline-block;
width: 100%;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.right {
float: right;
}
.center {
display: inline-block;
}
you can see jsfiddle here: http://jsfiddle.net/mF7XR/
The problem is that the centered ul is aligned to the middle between the left and the start of the right ul (see the example). Therefore it is not correctly centered. How can I center correct the second ul?
I am not sure whether you are good to go with javascript. Anyway, I did some work on it. Please have a look.
javascript
//Added Id to ul.center as "center"
function resize(){
var width = document.body.offsetWidth;
var center = document.getElementById('center');
center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.
CSS
.center {
display: inline-block;
float:left;
}
Working Bin
Define the Width of centered elements then only you could get what you want. You could also define the margin as follows...
margin: 0 {number greater than right floated element}px 0 {number greater than left floated element here you have only two elements so place here 0}px;
How about position:relative? Then you can position it anywhere without it causing problems in nested elements and mobile view.
http://jsfiddle.net/mF7XR/4/
This solution uses no absolute positioning. Tested on Win/Chrome.
Change the .center to
.center {
display: inline-block;
position: relative;
width: 100%;
top: -20px; /* move up */
}
and add this rule
.center li {
float: none;
}
jsfiddle
Update
If your content is not known, then you need JS (or jQuery) to set the offset relative position.
Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.
jsfiddle
It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.
I'm trying to set up a div which contains 4 divs. I want to set the width of the container and some of the contained divs to set values but they just seem to take the width of the content.
<html>
<head>
<style>
div {
border: 1px solid #888;
}
.container {
width: 300px;
position: relative;
}
.container div {
display: inline;
}
.div1 {
width: 20px;
overflow: hidden;
}
.div2 {
width: 80px;
overflow: hidden;
}
.div3 {
width: 160px;
overflow: hidden;
}
.div4 {
width: 20px;
overflow: hidden;
position: absolute;
top:0px;
right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"><img src="1x1.gif" width="1" height="1"/></div>
<div class="div2"><span>date</span></div>
<div class="div3"><span>text</span></div>
<div class="div4"><span>twistie</span></div>
</div>
</body>
</html>
The result looks like this:
+--+----+----+------------------------+---+
| |date|text| |twi|
+--+----+----+------------------------+---+
Can anyone explain why the left-hand divs are not being set to the required widths?
The reason you can't set the widths is because you are setting display:inline;.
When elements are displayed inline, they cannot have their dimensions specified because the size of the element is determined by the length of the text within it.
By default, <div> tags are set to display:block;. This mode can have its height and width specified, but defaults to being displayed below the preceding block.
There are two ways around this for you:
Use display:block; and float:left; -- This will change the blocks into floating elements, which means that subsequent elements will wrap around them. When used with other blocks, this effectively allows you to line them up. However using float can have other unexpected side-effects, due to the wrap-around effect I described.
Use display:inline-block; -- This is my preferred solution to this question. inline-block is a half-way house mode between block and inline. It allows an element to be treated as inline for the purposes of document flow, but still behave like a block internally, in that it will always be rectanguar and you are able to specify height and width, etc. It does have a few quirks (most notably poor support in IE6), but in general for what you're trying to achieve, it's a much cleaner solution and doesn't have the odd side-effects of float.
Hope that helps.
i think it's because of display:inline style
try this:
<div style='width:100px;overflow:hidden;'>
<div style='float:left;width:20px'></div>
<div style='float:left;width:20px'></div>
<div style='float:left;width:20px'></div>
<div style='clear:both;'></div>
</div>
Change your CSS as follows
.container div {
display: inline-block;
}
When you set the container div to inline, you actively set all of its children to inline as well, you may as well have just been using <span>s.
Here is an example for you to see.
http://jsfiddle.net/Kyle_Sevenoaks/ZwKDb/
.container {
float: left;
width: 300px;
position: relative;
}
.container div {
float: left;
}
Should do the trick. Remove the inline display on the interior divs, and float all the divs left. Then you can specify the widths of the divs and any margins between them.