I have a text block in a div that is floated to the right. The div should align to the top but it has bumped down about 100px. See the text box next to the red flower here: http://174.121.46.122/~flowerwo/inside.html
I tried absolution positioning but when I do the background image disappears. It should be obvious where the text needs to be but it won't align properly.
Here is the html:
<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3>Headline</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" />
</div>
</div>
</div><!-- end small box -->
Here is the CSS:
#small-box {
width: 625px;
position: relative;
margin: 10px 0 0 5px;
background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }
img.small-box-photo { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box
Any help getting this to align properly to the top will be appreciated.
{ width: 300px; float: right; margin: 0 30px 0 0; }
#small-box-bot => display: table;
img.small-box-photo => float: left;
It does work as expected for me. Take a look at this example. Doesn't it look like what you try to achieve? If no, give more information and, preferably, the link to online version where we can see the issue.
UPDATE AFTER THE ONLINE EXAMPLE.
So, in the example you gave, there is the problem with clearing happening when:
the #r-box-lower clears the right floating with clear: right
the #r-box-lower sits at the same DOM level as #small-box, containing the weirdly shifted block of text
because of the p.1 and p.2 the #text-box is being cleared by #r-box-lower that makes it start right where #r-box-lower starts.
So, to fix the issue, you need to wrap #right-box and r-box-lower into a shared div like:
<div id="right-column" style="float: right; width: 192px">
<div id="right-box">
…
</div>
<div id="r-box-lower">
…
</div>
</div>
Surely, you want to move those inline styles into your stylesheet.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Basically I have 3 divs:
<div></div>
<div></div>
<div></div>
clicking on 1st div toggles visibility of 2nd div
what I want is that 3rd div would take up all the remaining space but no more. In case of large 3rd div content I want scrollbar only on 3rd div, not whole page.
I have JS solution. So any pure CSS would be highly appreciated.
Here is one approach that involves using a combination of CSS table-cells and absolute positioning.
Create a CSS table as the top level container .main, and define three display: table-row containers .head, .extra and .content.
Within .content, nest a display: table-cell element .wrap and set position: relative. Within .wrap, use absolute positioning to fit a .scroller container that will hold the content.
If you hide the .extra block, the .content will stretch vertically to take up the remaining space.
html, body {
height: 100%;
margin: 0;
}
.main {
border: 1px dotted gray;
width: 100%;
height: 100%;
box-sizing: border-box;
display: table;
overflow: hidden;
}
.head {
display: table-row;
height: 50px;
background-color: beige;
}
.extra {
display: table-row;
/* display: none; */
height: 100px;
background-color: tan;
}
.content {
display: table-row;
background-color: lightblue;
height: auto;
}
.content .wrap {
display: table-cell;
height: auto;
position: relative;
}
.scroller {
overflow: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="main">
<div class="head">head</div>
<div class="extra">extra</div>
<div class="content"><div class="wrap"><div class="scroller">
<p>Scrolling div...</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum imperdiet metus ac elementum. Donec viverra porttitor velit, ut eleifend nulla porttitor quis. Donec placerat, leo ac volutpat pellentesque, elit mauris aliquet metus, sit amet dictum enim augue consequat elit. Pellentesque eu diam a sem ornare tristique. Sed sollicitudin elementum nibh, eget tincidunt sem rhoncus at. Morbi cursus ornare dolor, vel tempus leo blandit ut. Donec at dictum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus tellus in aliquet accumsan. Nam scelerisque ante eros, et tempus dolor mollis nec. Cras in mauris ac orci hendrerit venenatis. Nunc porta nisi eu odio feugiat, sed fermentum odio posuere. Vivamus luctus dui sit amet lobortis dignissim. Nulla feugiat est lacinia est porta porttitor. </p>
</div>
</div>
</div>
</div>
If you know that there will only be three divs, you could just control the height and change it from 33% to 66% when the second div collapses, and using css transition to make the animation.
I'm taking an old WordPress site I designed years ago and now I'm making it responsive. Problem is I have a main content area on the site and a sidebar div and the issue is the sidebar div is not expanding down the entire height of the #contentWrap div on this site. I've already tried adding 100% heights to the #page, #contentWrap and #sidebar, all to no avail. On the old site design, I did a trick using background images, but that realistically won't work with a responsive desig.Any idea how I can make this work?
Site in question: http://destinationbeershow.com/episode-guide/
Code:
<div id="contentWrap">
<div id="content" class="narrowcolumn">
</div>
<div id="sidebar">
</div>
</div>
CSS:
#contentWrap {
width: 856px;
height: 100%;
}
#page {
background-color: #ac4f23;
text-align: left;
margin: 0px auto;
width: 856px;
height: 100%;
}
.narrowcolumn {
background-color: #ac4f23;
float: left;
padding: 0;
margin: 0;
width: 640px;
color: #FFF;
}
#sidebar {
padding: 16px 8px 10px 8px;
float: right;
width: 160px;
height: 100%;
font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
border-left: 10px solid #fff;
background-color: #ebd299;
}
You can make everything collapse below your 856px hard width and use percentages inside that, or you can fiddle with the math. You also don't mention how you are doing your media queries, I'm assuming mobile first, which means that IE8 won't see the columns unless you learn more about that or use desktop first responsive design, however to make the columns the same height no matter what is inside either, here's one way (display:table/display:table-cell) which stacks below the 856px width you have on your #page. Use percentages.
DEMO: http://jsbin.com/biyito/1/
CSS:
.narrowcolumn {
background-color: #ac4f23;
color: #fff;
box-sizing: border-box;
padding: 10px 20px;
}
#sidebar {
padding: 10px 20px;
border-top: 10px solid #fff;
background-color: #ebd299;
box-sizing: border-box;
}
#media (min-width:856px) {
#contentWrap {
width: 100%;
display: table;
}
.narrowcolumn {
width: 80%;
display: table-cell;
}
#sidebar {
display: table-cell;
padding: 10px;
width: 20%;
border-left: 10px solid #fff;
border-top: 0px;
}
}
HTML
<div id="contentWrap">
<div id="content" class="narrowcolumn">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
<div id="sidebar">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
the #contentWrap has no height... i tried I really tried to make it responsive with your content but it just doesn't work. For now if you define the height of it, the bar will be end to end.
In that page the height would be 1361px
If you can place the content in http://jsfiddle.net/ is much more easy to find and get to the problem.
I have a fixed div with 100% height, and within that, a child-div that's relatively positioned. The child-div holds text that can be changed, so it doesn't have a fixed height.
I want the child-div to scroll vertically if its content overflows out of the screen. I played around with the min and max height properties to achieve this, but it isn't an ideal solution, and doesn't always work.
EDIT: min and max height seemed to be ignored, almost. I calculated how much vertical area the textBox would take up for the minimum 'allowable' screen height, and set that as the height. Adding min and max height made no difference to this. The only problem with this solution is that the box is always around ~60%, so even when it doesn't need to scroll, it does. This works, but isn't ideal. If there's a way to get around this it would be great.
This is what I have so far:
<div class="content">
<div id="textbox"> some text
</div>
</div>
.content { position: fixed; height: 100%; top: 0px; right: 0px; }
#textBox {
position: relative;
top: 165px;
height: 61.5%;
overflow-y: auto;
}
Is there a better, more fool-proof way for doing this?
The following worked perfectly for me:
<style type="text/css">
#fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid black;
overflow: hidden;
background: white;
}
#scrolling {
overflow: auto;
max-height: 98%;
}
</style>
<div id="fixed">
<div contenteditable id="scrolling">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non
enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas
augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
The div's content is editable, so just add text until it scrolls. It would work on decent browser.
Live Example
Basically You have to set the overflow of your fixed element as you can see in this example, and there's a jsfiddle to play with the possibilities.
I have found a solution by testing and it seems to work. It requires 3 DIVs. First and uppermost div will be your fixed element. It will contain another div as its child, which will be positioned relatively. It will another div and this div will contain your content, it has to be positioned absolutely
Code: https://codepen.io/ltorvalds024/pen/GxKdeO
Using CSS, how can I display an image behind some text and also offset it on both the X and Y axis?
I have a design that is 950px wide, so I'm wanting want this image to remain 'in sync' with the rest of the header by placing it in a container that is centered and also 950px wide.
My problem is that instead of the image being 'a layer behind' the header text, it is instead displaying the image in full and pushing the rest of the contents down.
Any help is greatly appreciated.
IMAGE ADDED FOR CLARIFICATION
Thanks,
Andy.
use Percentage values in your background positions in your css
.divName {
background-position: 50%;
}
or using words like top or bottom ...
See the full list of values here
UPDATE;
use the image as a background image instead of inline html image
<div class='content'>
<p> Some content</p>
<p> More content</p>
.... even more content ...
</div>
Now the css:
div.content {
background-image: url('image path');
background-position: 50%;
}
This way the image will always be behind the content, and it will be in the center of the div.
See: http://jsfiddle.net/Fx5q3/
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index
CSS:
#container {
width: 300px;
margin: 0 auto;
background: #ccc;
background: rgba(127,127,127,0.7);
position: relative
}
#behindImage {
background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat;
width: 150px;
height: 150px;
position: absolute;
top: -30px;
left: -90px;
z-index: -1
}
HTML:
<div id="container">
<div id="behindImage"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero. Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque adipiscing.</p>
</div>
Do you mean something like this example?
Oke, that's more clear. Now I'm pretty sure this is what you want.
I been trying every way possible to try and float the sidebar to the left and have it fit beside the content div, but it seems IMPOSSIBLE for me. Please help.
HTML:
<div class="index-page">
<img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
<h1> Welcome to Elektrik Host! </h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.</p>
<h1> A little about us </h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.</p>
</div><!-- //index-page -->
<div class="sidebar">
<img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
</div><!-- //.sidebar -->
CSS:
.index-page { color: #000; width: 462px; }
.sidebar { float: right; width: 200px; }
clearfix :
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
I always find it easier to put the float-ing content ahead of the content that makes way for it, so I switched your sidebar to come ahead of the index-page div, and used the following CSS:
.sidebar {
width: 200px;
float: left;
}
Demo over at JS Bin.
.sidebar { float: left; width: 200px; } not right
To make them beside:
- index-page also need floatleft too index-page{ float: left;} (FF need, IE not)
- move sidebar to before of index-page
You can follow this tutorial: http://css.maxdesign.com.au/floatutorial/index.htm
CSS CODE
.floatright { float: right; }
HTML CODE
<p>
<img class="floatright" src"images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
<p>
you dont need to do just apply the class straight to the image.
PK