I have an issue with an absolute positioned DIV. Its positioned to the right of an image, and underneath it is another DIV. On fullscreen, it looks fine, but when I resize my browser window, the text goes into the bottom DIV. I just want the browser to make a scrollbar so the text can continue horizontally. Here is my issue on Jfiddle:
http://jsfiddle.net/9hpVT/
You have to resize the width of the browser to see the problem
HTML
<div>
<div id="d1">
<img src="abc.jpg" />
</div>
<div id="d2">Here is a long line of text that will overlap the bottom portion I do not want it to do this because it is very bad for my design. Someone please help me out!</div>
<div id="d3">I don't want to be interrupted!</div>
</div>
CSS
#d1 {
left:0;
top:0;
}
#d2 {
position:absolute;
left:50px;
top:0px;
}
This happens because the position is absolute.
I would use float instead of positioning for this. See my Fiddle.
#d1 {
float: left;
}
#d2 {
margin-left: 50px;
}
FIDDLE DEMO
You dont need to do anything with #d2,#d3 . All you have to do is apply float:left to the d1 that contains the image !
Related
Hello i found a very peculiar thing, apparently left is rendered different from right.
see this fiddle:
http://jsfiddle.net/Hn8At/2/
here is the html
<div id="wraper">
<div id="ribbon_ct">
<div class="ribbon left"></div>
<div class="ribbon right"></div>
</div>
</div>
and the css
body{ margin:0; padding:0px; }
#wraper{ width:800px; margin:0 auto; background:#eee;padding-top:500px;}
#ribbon_ct{ width:100%; background:#c00; height:400px; }
.ribbon{background:#0C9; width:30px; height:30px; position:relative;}
.left{float:left;}
.right{float:right;}
.ribbon.left{ left:-30px;}
.ribbon.right{ right:-30px;}
I have 2 green squares on either side, one causes a scrollbar, the other does not. You can only scroll the right one into view. any ideas as to why?
Its absolutely normal.
If an elements overflows the body from the left, it will be hidden, and from the right it will be scrolled.
use overflow:hidden; on #ribbon_ct if you want the right div to be hidden.
Your #ribbon_ct is 800px wide because of width: 100% of #wraper and centered.
When you don't give width to his parent (for ex: body {width:1000px;}) or widen the viewport you can't see the left green square, because you positioned left: -30px;.
Try your code not in jsfiddle but directly in browser.
And if #wraper was not centered, you can't see left square even when resizing,
<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>
<div id="content"></div>
CSS
#show01{
margin-top:14px;
position: relative;
height:auto;
border:thin solid blue;
}
#show01 img {
position: absolute;
max-width:70%;
}
#content{
background:#999;
height:45px;
}
img must be position:absolute because they are subject of jquery slide show.
but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.
So, how can I keep img position:absolute and show01 to have height as the img inside.
I cannot define div show01 height in pixels, because of keeping responsive layout.
fiddle is here
This is semi-hack(ish).. but you could set a margin for #show01.
Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.
Example
Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.
I have managed to get header at the top, and content at the center. But I did get stuck with placing user-navigation div at the right of the content. I have tried using position:relative, but what happens it appears below content's div, but on the right though, and also when I scroll down the view, it appears on top of the header.
So how do I solve this? Thanks!
Updated
This is how it should look visually:
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
#header { position:fixed; height:100px; }
#nav { float:right; margin-top:100px; }
#content { overflow:auto; margin-top:100px; }
Should work unless I didn't understand.
Assuming you want the navigation to be inside the content and on top at the bottom right you should do the following. Set the content's position to relative, and then set the navigation's to absolute. Then for the navigation set the position like so -
#nav { position:absolute; bottom:0; right:0; }
Does that work?
So I got some divs... The aim here is to play with some hide-show effects.
<div class="container">
<div class="move">
Some dynamic content...
</div>
</div>
.container {
width:100px;
height:100%;
owerflow-y:hidden;
}
.move {
width:300px;
height:100%;
float:right;
}
The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?
Thanks.
It is because your containers width is less than the contents.
ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.
You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).