What I'm looking to do is stop it overflowing to the very bottom of the page as I want a div at the bottom for other things. So how do I leave a gap between the text and the bottom of the page?
Also how to I constrain text to the size and position of a div? The element is about 20 pixels under the div and is causing overlap issues.
HTML:
<div id="Info">
"a lot of text here"
</div>
CSS:
#Info {
background-color:#000;
position:absolute;
top:200px;
left:20%;
height:50%;
width:60%;
color:#FFF;
font-size:18px;
font-weight:bold;
z-index:110;
}
You said "The element is about 20 pixels under the div and is causing overlap issues." Have you tried adding margin-bottom: 20px; to your id? Or however many px you need.
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 5 years ago.
I am trying to keep an icon floated left on a liquid text container that has line breaks.
The problem is that when the line breaks, there is a large gap before the text ends and where the div ends. Which makes my floated element start where the gap ends.
Is there a way to make the div only the size of its contents?
Check this codepen: https://jsfiddle.net/e38edtdy/1/
Resize the output area to see the gap of space.
The button will auto resize it to see the gap.
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>
An alternative for you might be to put hyphens: auto on your text container to make text break more nicely. Firefox needed a language attribute as well, like lang='en-US'.
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
I have 3 divs. The 'middle' div needs to be centered in the containing element (a seperate div that is the width of the page, basically) while the other two divs should be on either side of the 'middle' div.
Here is what I've tried so far, but as you can see, if the left and right divs aren't even in width, they push the 'middle' div off center.
<div class='cont'>
<div class='name2'>The Man with Six Fingers</div>
<div class='vs'>VS.</div>
<div class='name1'>I. Montoya</div>
</div>
.cont{
position:fixed;
top:0px;
width:100%;
background-color:red;
text-align:center;
}
.cont >div{
display:inline-block;
}
http://jsfiddle.net/7TLSa/
The solution only needs to work in Webkit since this will be in a mobile app.
I adjusted the widths, min-width, and white space to tweak its responsiveness. Is this what you're looking for?
See DEMO
.name1, .name2 {
width:30%;
min-width:160px;
white-space:nowrap;
}
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,
I found an example here of using rounded corners using a single image. I've got this working perfectly in IE7+ and FireFox.
The following is an example tab layout:
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
<div class="inner"><p>Test - 3</p></div>
</div>
The following is my CSS Style:
.corner
{
background:url(../Images/LightCorner.gif);
position:absolute;
width:13px;
height:13px;
overflow:hidden;
}
.inner
{
position:relative;
padding:13px;
margin:0px;
}
.inner p
{
padding:0px;
}
.tab
{
color:#FFF;
float:left;
font-weight:bold;
margin-right:5px;
position:relative;
text-align:center;
}
.tab p
{
margin:0px;
padding:0px;
}
.tab
{
background:#B5B5B5;
}
.TL
{
top:0px;
left:0px;
background-position:0px 0px;
}
.TR
{
top:0px;
right:0px;
background-position:-13px 0px;
}
.TL, .TR
{
margin:0px;
padding:0px;
position:absolute;
}
The issue is that when my div's width is an even number, I end up with a 1px right-hand border, as though the top right div is actually being positioned as right:1px. When the width is an odd number I do not see the right hand grey colour of the tab and the div is displayed as expected.
The image I am using can be found here. A full example can be found here.
Why is the top right div not being positioned correctly at right:0px? Why do I end up with a 1px gap in IE6 when the tab width is an even number?
The issue is that when my div's width
is an even number, I end up with a 1px
right-hand border, as though the top
right div is actually being positioned
as right:1px. When the width is an odd
number I do not see the right hand
grey colour of the tab and the div is
displayed as expected.
There is nothing with your code, it is a bug in Internet Explorer 6. When absolute-positioning things to the right or to the bottom, the actual position will be rounded to 2px, giving 1px "margin" when the total width/height is even (or odd). Unfortunately, you need JavaScript to fix that.
You can check this example (written by me) and slowly resize the IE6 window, pixel-by-pixel. You will notice that the position of bottom and right boxes will be updated only once every two pixels. Another guy has also found and documented this bug on his site.
I've already written one to fix height-calculation when positioning top and bottom, and leaving height as auto. I use this script on this site. In your cause, this script can be modified to calculate the left-offset based on available_width-(right+width).
Have you tried
body {
margin: 0;
}
Try with:
right:-1px;
for IE6