So I have two <div>s nested inside another .
Something like:
<div class="wrapper">
<div class="left_sidebar"></div>
<div class="text_area"></div>
</div>
I noticed that when the text_area <div> contains enough text, it slightly pushes the left_sidebar to the left and moves over as well. It doesn't do it when my text posts are short.
This is the CSS I have:
.wrapper {
position: relative;
margin-left: 20%;
}
.left_sidebar {
position: absolute;
margin-top: 1.5%;
width: 20%;
border-right: 1px solid #777F7F;
text-align: right;
padding-right: 1%;
}
.text_area {
position: absolute;
text-align: left;
margin-left: 22%;
font-size: 1em;
width: 45%;
}
EDIT: I feel that I should mention that this doesn't happen on my 23inch 1080p monitor, but it does happen on my 11inch 768p monitor.
I think you may get rid of position: absolute; from left_sidebar & text_area because I didn't see any clue of this positioning. Instead of position: absolute;, using float:left; will help you I guess.
See this fiddle.
Related
I'm trying to get a child DIV to have its padding set relative to its fixed parent DIV.
To demonstrate the problem, I've put together a quick JSFiddle - http://jsfiddle.net/mdxsegLt/
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
max-height: 12.5%;
margin-bottom: 20px;
width: 100%;
left: auto;
right: auto;
z-index: 1030;
background-color: green;
}
.padding-percentage {
position: relative;
width: 50px;
max-width: 30%;
/*padding: 14px;*/
padding-top: 20%;
background-color: red;
}
<div class="top-fixed">
<div class="padding-percentage">test</div>
</div>
In that example, I'd like the red DIV to be contained entirely within the green, using 20% of the green DIVs height for the padding, not the entire page.
First things first... lets drop the ALL CAPS element names. It's bad practice these days. I think you were overdoing it a bit with your CSS declarations and by NOT nesting the text properly by wrapping it in a span or p tag. You shouldn't just have floating text that's not wrapped in a p or span tag. Wrapping it in such tags allows you to further customize like I did in my fiddle.
UPDATE
I think I actually get what you're trying to do.
CSS:
.top-fixed {
position: fixed;
top: 0px;
height: 70px;
width: 100%;
background-color: green;
}
.padding-percentage {
height: 100%;
width: 50px;
background-color: red;
}
.padding {
margin-top: 0px;
padding-top: 20px;
}
HTML:
<div class="top-fixed">
<div class="padding-percentage">
<p class="padding">TEST</p>
</div>
</div>
LINK TO FIDDLE
Looks like you needed to adjust the CSS and add a class to the "test" text by tossing it an a p tag.
Check out my fiddle and hope it helps you!
I'm trying to apply absolute position on an error label elemennt, which is inside an input field that is also positioned absolutely. The problem is that auto-width on the error element won't apply correctly, and will break after the first word. Why is that happening? If I use position right instead of left, it seems to work fine. Here's a jsfiddle link: http://jsfiddle.net/u793ata5/
Here's the HTML code:
<div id="outside">
<div id="inside">
<label class="error">Show this error on the side</label>
</div>
</div>
And CSS:
#outside {
position: relative;
width: 250px;
height: 250px;
}
#inside {
position: absolute;
top: 30%;
height: 30px;
left: 40%;
width: 80%;
}
.error {
width: auto;
position: absolute;
left: 90%;
top: 10%;
background-color: red;
color: white;
}
Why so many absolutely positioned elements? Maybe I'm not understanding what you want the layout to look like--and maybe you could clarify--but this modified fiddle looks more reasonable to me.
http://jsfiddle.net/u793ata5/3/
.error {
background-color: red;
display: block;
margin-left: 50%;
color: white;
}
I try not to use position: absolute unless I...uh absolutely have to.
You're putting it's position at 90% from the left. This means it only has 10% of the parent width to place text before wrapping. Try using
float: right;
instead of
left: 90%;
When I try to use the top word in CSS on a link it does not work.
I want my links to be lower on the page so I would use top: 10%;. That does not work though because my links seem to not move no matter what. I can however get them to move sideways with text-align:center;.
My HTML
<div id="pythonfilelistfiles">
<a href="http://localhost/project1/pythonfiles-calcuator.html">
<div class="pythonfilelistboxs" id="file1">
<h1> Simple Calculator </h1>
</div>
</a>
My CSS
#pythonfilelistfiles {
width: 78%;
height: 92%;
margin-left: 20%;
margin-top: -2%;
max-width: 78%;
max-height: 92%;
overflow-y: scroll;
}
#file1 {
top: 0%;
}
.pythonfilelistboxs {
width: 96%;
height: 12%;
background-color: black;
margin-left: 2%;
z-index: 5;
position: relative;
border-radius: 8px;
border: 2px solid red;
color: red;
text-align: center;
line-height: 80%;
}
There are a number of ways you could accomplish this, most of which are probably a little more maintainable than using positioning properties -
Add padding to the top of the containing div.
Increase the line-height for those links.
Use margin-top to move it down a relative amount (you'll need to set it to display: block as well, which will change how they behave in the page flow).
It is probably easier to use a unit other than percentages in any case - it would better practice to use a type-related unit like em or rem.
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you