like in the title i can't put some text centered vertically near a div with CSS, i searched on google and on stackoverflow so i decided to make a question here.
This is an example of what i need done with Paint:
I tried display table cell and box solutions but it works only without the floating div on top left.
When the text is longer than the blue div it should go under the div just like a normal text with a floating div.
I'm searching an only CSS solution, it can be done or not?
I am not completely sure if that is possible, but here is my best attempt at it, at least works for the first 2 examples.
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>
CSS:
.wrap {
width:500px;
border:1px solid red;
margin:10px;
}
.wrap:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-left:-0.25em; /* adjusts spacing */
}
p {
display:inline-block;
vertical-align:middle;
width:350px;
}
img {
float:left;
}
.invisible {
height:100px;
display:inline-block;
vertical-align:middle;
}
A fiddle.
This is possible with pure CSS.
body {
background: url("http://img08.deviantart.net/b5aa/i/2015/140/7/c/chalkboard_by_lorelinde-d8u2phm.jpg") no-repeat;
}
.container {
color: rgba(255, 255, 255, .9);
font-family: "Chalkduster", "Baskerville";
font-size: 18px;
padding: 0 10px;
width: 550px;
}
#user_portrait {
border-radius: 13px;
border: 3px solid rgba(255, 255, 255, .9);
float: left;
margin: 0 20px 0 0;
max-height: 300px;
max-width: 300px;
filter: sepia(50%);
}
#overview_text {
letter-spacing: 1px;
line-height: 1.3rem;
padding: 0 0 0 10px;
white-space: pre-line;
}
<body>
<p class="container">
<img id="user_portrait" src="https://pbs.twimg.com/profile_images/704337993293815810/PmkKs6yw.jpg">
<span id="overview_text">“Never hate your enemies. It affects your judgment.”
“My father held a gun to his head, and my father assured the bandleader that either his signature or his brains would be on the contract.”
“There are many things my father taught me here in this room. He taught me: keep your friends close, but your enemies closer.”
</span>
</p>
</body>
The key point is to put both image and text into non-inline parent tag and make them float.
This is impossible with css only. (i would be happy to be proved wrong.)
Related
I have to inline two divs side by side. The thing is, I can't edit HTML and they don't have a container. To make things even more complicated, the first div needs to be wider than the second one. And I have no idea how to do this and make it responsive.
This is what I have so far. But it's not responsive. To make it so, I'd have to edit it with #media and I'm really trying to avoid that. Is there a way I could make this cleaner? A way I could use flex maybe, without a container? And make it responsive too, without having it meshed together on smaller devices?
.one,
.two {
float: left;
}
.one {
width: 66.66%;
}
.two {
width: 33.33%;
}
<div class="one">content goes here</div>
<div class="two">content goes here</div>
EDIT: This is what the outline of my code looks like, with a container. Just to get you guys more information about the issue. Div with a class section-one has 5 items inside, and they need to stay inlined and responsive when the window is resized, so I don't want to mess up the code I currently have because it behaves well on smaller screens.
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
margin-top: 80px;
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
You could use CSS calc() function along-with display:inline-block instead of float to align both divs responsively without making use of media query.
But as both divs are display as inline-block and when using inline-block it adds white-space around it's block, to remove that I have used font-size:0 in body tag, so on remaining block in your design you have to assign font-size manually or else text won't be visible.
body{
font-size:0;
margin:0;
}
.one{
display:inline-block;
background:pink;
width:calc(100vw - 40vw);
font-size:16px;
}
.two{
display:inline-block;
background:pink;
width:calc(100vw - 60vw);
font-size:16px;
}
<div class="cont">
<div class="one">content goes here</div>
<div class="two">content goes here</div>
</div>
Given the fact you already use Flexbox, I suggest you do it for this too, like this.
If you don't want the container, just drop its markup and move its CSS properties to the body
Fiddle demo
Stack snippet
.container {
display: flex; /* added */
flex-wrap: wrap; /* added */
}
.heading {
flex: 0 0 100%; /* added, behaves like a block */
text-align: center;
margin-bottom: 35px;
}
.section-one {
flex: 0 0 100%; /* added, behaves like a block */
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
flex: 1 0 66.666%; /* added, behaves like an inline-block but fill when on single line */
min-width: 400px;
text-transform: uppercase;
margin-top: 80px;
padding-right: 80px;
box-sizing: border-box; /* added, make padding be included in set width */
border: 1px dotted gray; /* demo purpose */
}
.section-right {
flex: 1 0 33.333%; /* added, behaves like an inline-block but fill when on single line */
min-width: 200px;
box-sizing: border-box; /* added, make border be included in set width */
border: 1px dotted gray; /* demo purpose */
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
I suggest you to use a media query anyway to make your divs on top of each other on small devices, especially if you have text content. The max-width I'm giving to you is just an example
#media screen and (max-width: 480px) {
.one,
.two {
float: none;
width: 100%;
}
}
I would gladly suggest you the flex-box property, but if you don't got a container and can't modify the HTML, this will be complicated.
Here's the link anyway : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
With flexbox, you just have to give the property to your container :
.container {
display: flex;
}
Then you can choose the way you want to sort your elements :
.container {
flex-direction: row;
}
Again this is an example, check the link i gave you for further informations.
You need to reset box-sizing to include padding and border into width calculation.
The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
A media query will help to pile them when boxes become too small.
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
example
.container {}
.heading {
text-align: center;
margin-bottom: 35px;
}
.section-one {
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: space-between;
}
.item {
position: relative;
flex-shrink: 0;
margin: 0 auto;
margin-bottom: 15px;
}
.section-left {
float: left;
text-transform: uppercase;
width: 66.66%;
/*margin-top: 80px; remove */
padding-right: 80px;
}
.section-right {
float: left;
width: 33.33%;
}
/* updates */
.section-left,
.section-right {
box-sizing:border-box;
}
#media all and (max-width : 599px) {
.section-left,
.section-right {
width:100%;
padding:1em;
}
}
/* let's see them */
div {
box-shadow:0 0 0 2px green;
}
<div class="container">
<div class="heading">
<h2>Lorem ipsum dolor</h2>
<p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
</div>
<!--- /.heading -->
<div class="section-one">
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
<div class="item">Praesent eu elementum.</div>
</div>
<!--- /.section-one -->
<div class="section-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-left -->
<div class="section-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
</div>
<!--- /.section-right -->
</div>
I'm having some trouble working with the :not() pseudo-class, I'm starting to consider my goal to be unavailable within CSS alone.
Here's a codepen of my work
What I am trying to achieve is the to make the first letter within the paragraph that are not within a the span to change.
section p:not([span]):first-letter {
font-size:50px;
font-family:'Cinzel Decorative';
}
<p><span>Unchanged text</span> Changed text</p> // Goal <---
I have both have tried and know that classes work, however that would require me to change a lot of previous code and would highly prefer the span element in this case. And since there is several paragraph sections it wouldn't be efficient to look for a value either.
If you are willing to change a bit your markup, making it semantically correct, you can achieve it by doing this below:
section {
max-width: 80%;
margin: 10px auto; /* changed for demo */
background-color: rgba(0, 0, 0, 0.3);
padding-bottom: 2%;
}
section h1 {
margin: 0;
text-align: center;
font-size: 250%;
padding: 1%;
background-color: rgba(0, 0, 0, .5);
color: #C55757;
font-family: 'Syncopate';
}
section h2 {
font-size: 30px;
display: block;
padding: 1%;
font-family: 'Syncopate';
color: #C55757;
background-color: rgba(0, 0, 0, .35);
}
section div {
display: inline-block;
font-size: 20px;
color: white;
padding: 1%;
width: 47%;
text-align: center;
vertical-align: top;
font-family: 'Open Sans Condensed';
margin-top: 2%;
}
section div:last-of-type {
border-left: 2px solid black;
}
section p:first-of-type::first-letter {
font-size: 50px;
font-family: Cinzel Decorative;
}
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Syncopate|Open+Sans+Condensed" rel="stylesheet">
<section>
<h1>Company Name</h1>
<div>
<h2>What we do
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet tincidunt ornare. Quisque rutrum velit mi, eget aliquet turpis consectetur vel. Maecenas convallis nunc pulvinar urna placerat, nec tincidunt massa </p><p>Morbi quis vehicula leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis id felis dapibus lectus auctor faucibus vitae vel urna. Vivamus vel dui elit.
</p>
</div>
<div>
<h2>Our company
</h2>
<p>Nunc eget odio sit amet lorem consequat dictum. In consequat, nunc at feugiat volutpat, lacus sapien mollis lectus, sed facilisis risus massa vel augue. Nam at tellus ac odio consectetur interdum ut et ex. Nullam in tincidunt nunc. Nunc tincidunt est eu neque molestie, vitae suscipit ante egestas. Cras id auctor arcu.</p><p>
Cras eget metus tincidunt, eleifend mi id, congue elit. Aenean faucibus est leo, nec rhoncus justo aliquam nec. Praesent erat erat, pellentesque at varius in, ultrices quis urna.
</p>
</div>
</section>
UPDATE 3
I finally have my laptop (was using iPhone) and see the codepen, so here's my take on it.
I wanted to change layout, but I didn't because there must be a method to the madness (Although I did change the content; See the last 2 items of this list.)
The layout in general is the display:table-* group.
The 2 sub headings? "What we do" and "Our work" are ::before pseudo-elements.
The <span> now serves as :first-letter since each browser's interpretation of :first-letter is too wacky we'll just pass on that.
CODEPEN
EDIT
OK, jumped the gun on Snippet 2, see Snippet 3 which is Snippet 2 without first-letter. first-letter is replaced by a pseudo-element ::before. Beat that Firefox!
Details are commented in Snippet
SNIPPET 3
/* position: absolute will take span out
|| of the flow. This means whatever affects
|| the <span> directly will not affect the
|| <p> and vice versa.
*/
/* ch is a measure unit equalling the width
|| of a zero. It's size is relative to
|| font-size. I find ch indispensible when
|| dealing with text.
*/
span {
position: absolute;
left: -12ch;
}
/* Since :first-letter behaves differently than what's
|| desired in Firefox, we'll use a ::before pseudo-
|| and then position it over the 'C'
*/
/* We can adjust the line-height (/40%) to bring both <span>
|| and <p> in vertical alignment. The left: 1.2ch is the
|| space between <span> and <p>. The white background is
|| the hacky part which is used to hide the original
|| 'C'. Since the majority of the measurements (i.e. ch)
|| are relative,the setup is responsive as long as you
|| remeber that it's relative to font-size.
*/
p::before {
content: 'C';
font: 100 3ch/40% Times;
color: red;
background: white;
position: relative;
left: 1.2ch;
}
p {
position: relative;
left: 12ch;
}
<!--All textNodes residing within <p> includes it's
descendant's textNodes as well. This is evident if we use
.textContent or jQuery .text(). Knowing that, we should
expect that a direct approach using CSS to change the 'C'
with pseudo-selector :first-letter would fail.-->
<p><span>Unchanged text</span> Changed text</p>
<!--Getting the <span> out of the way so that the :first-
letter will be 'C' instead of 'A' is the first step-->
OLD
UPDATE 1
See Snippet 2 I used position:relative and absolute so that the <span> is in a different flow from the rest. Got this idea from BoltClock's and Oriol's convo.
I was thinking: What's the wackiest CSS property? and I came up with this using floats
SNIPPET 1
span {
float: left
}
p:first-letter {
font: 100 3ch/60% Times;
color: red;
float: left;
padding-left: .5ch;
}
p {
float: left;
}
<p><span>Unchanged text</span> Changed text</p>
SNIPPET 2
span {
position: absolute;
left: -12.5ch;
}
p:first-letter {
font: 100 3ch/40% Times;
color: red;
position: relative;
padding-left: .5ch;
}
p {
position: relative;
left: 12ch;
}
<p><span>Unchanged text</span> Changed text</p>
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
Not just a simple image next to a paragraph< but with some spaces like this
(source: gyazo.com)
So far of what I've done :
<div class="span6">
<span class="head">Header</span>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
<span class="paragraph">
This is Photoshop's version of Lorem Ipsum.
Proin gravida nibh vel velit auctor aliquet.
Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</span>
</div>
.span8 {
width: 620px;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
}
.paragraph {
font-size: 14px;
width: 300px;
}
And it looks like this
(source: gyazo.com)
Ignore the line, it's a cropper image off the web.
What am I doing wrong? how can I fix this.
Thanks!
Here is a jsfiddle for you: http://jsfiddle.net/Xxw85/
The code should look more like this:
<div class="span6">
<p>Header</p>
<div class="head">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgMvCRHrTA30jksWsHfDZ4GwWfjJhM8Ck2RAtA_OLeOpnGRTrEXw"/>
</div>
<div class="paragraph">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auc
tor, nisi elit consequat ipsum, nec sagittis sem nibh i
</div>
<div style="clear:both"></div>
</div>
and css:
.span6 {
width: 620px;
background-color:#efefef;
}
.head {
font-weight: bold;
font-size: 26px;
float: left;
color:red;
}
.paragraph {
font-size: 14px;
width: 300px;
float:left;
}
Good luck.
Consider this fiddle. I have used div element instead of the span element inside the parent div.
<div>
<div class="head">Header</div>
<img style="vertical-align:middle float: left;" src="img/pickaxe.png"/>
</div>
And float the content to the right by adding this.
.paragraph {
float:right;}
http://jsfiddle.net/AaXTm/8/
The width of the element was less than the parent element and since you didn't use any floats or clear, the elements were visible inline.
i've been going over this one for about two days.
example
it's a fairly complicated design, so to reduce code pasted here i've recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
scenario
i have a container with numerous <li>'s containing a div (containing dynamic content from a database) that initially has the property display: none.
on hovering over an image in these <li>'s however, i wish to show the div.
it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.
what i've tried
i have tried combinations of z-index's and absolute and relative positioning, but i haven't been able to find a solution yet.
i've isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.
question
my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?
it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i'd ask if there was another way to approach this altogether?
thank you.
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
update
in response to answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>
You only want to display one of these hover elements at a time?
Put a single DIV outside of the main body and make it hidden.
Then use javascript to adjust its position and content every time you hover over an LI.
No need to give every LI its own DIV.
Store the contents inside a data attribute
<li id=something data-some-content="Hello joe">
Then you can retrieve it with jQuery like so
$("#something").data('some-content')
Your CSS styles are correct but in your HTML you have two <div> elements with the id='container_c' and that's invalid, IDs are unique and you can't give same id to two or more elements. If you two ore more elements to be given same style then try class='container_c' and in the CSS change the #container_c to .container_c
Check this fiddle for the fixed version
http://jsfiddle.net/DeepakKamat/zwxpG/13/
the solution was a mixture of #NoPyGod's jquery suggestion and to have a better understanding of how absolute and relative positioning work.
basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a 'container' of the div you are working with.
to escape from the 'container' that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.
a working jsfiddle is here:
http://jsfiddle.net/rwone/eeaAr/
i also implemented #Deepak Kamat's suggestion to only have one id per page and change the rest of the div's to be identified by classes.
i subsequently read the article below that made more sense to me this time and after working in this context:
http://css-tricks.com/the-difference-between-id-and-class/
thank you to all for your assistance!
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);