Develop Reference

Popout the child from parent overflow:scroll

I am struggling with this problem. I have a vertical menu list which is inside a div with overflow set to 'scroll' (I tried with auto as well). If I hover over a item in the menu with the (overflow set to scroll) set, the menu values are not being displayed. Here is the image which is how it is displayed.
Here is the code for the above situation.Not Working
Here is the css part of the code which causes a lot of trouble:
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 100px;
//overflow:scroll; //This is the code to be changed
}
.sidebar ul{
z-index:25;
}
.insideul{
overflow: scroll;
}
#mainist li{
z-index:50;
}
Here is the working image.
Here is the working code if I remove the overflow. working
Can someone help me with the above error.
Thanks.

I just comment out the overflow-x: auto and overflow-flow: auto in the .sideBar class, it works.
https://jsfiddle.net/3z8mq4k3/1/
.sidebar{
position: absolute;
top: 0px;
right:0px;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
z-index: 10;
float:right;
margin-right:20px;
height: 700px;
/*overflow-x: auto;
overflow-y: auto;*/
}

p element inside div is wider than the parent div

Take a look at the link. The p element within it's parent has more width. I want to display p within the dialog box. How would I do this?
http://jsfiddle.net/2y1wj0mm/
.dialog-box {
margin:0 auto;
width:300px;
height:200px;
background-color:#326A16;
-webkit-filter:drop-shadow(0px 0px 5px #000000);
border-radius:20%/34%;
}
.dialog-box:before {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-right: 21px solid transparent;
border-left: 18px solid transparent;
border-top: 42px solid #326A16;
margin:195.71428571428572px 90px;
}
.dialog-box p {
display:inline;
margin:10% 14%;
text-wrap:normal;
}

Update your .dialog-box:
.dialog-box p {
display: block;
margin:10% 14%;
width: 200px;
word-wrap: wrap;
word-break: break-all;
padding-top: 30px;
}
3 things to do here:
display: inline does not work in your case; you have to use the width & height of p element
You have to wrap & break the words using word-wrap and word-break
You probably need to place the words inside the green dialog, using padding-top
Side note:
There is no point to set margin with so many decimal places. Use integers only.
Demo: http://jsfiddle.net/9bpyjnfL/1/

It happens because you put text without any whitespaces in it, so browser is not sure how to break those long line. You can instruct it with word-wrap property:
.dialog-box {
/* ... */
word-wrap: break-word;
}
Demo: http://jsfiddle.net/2y1wj0mm/1/

Try this i change p to block element and gave it a width
.dialog-box {
margin:0 auto;
width:300px;
height:200px;
background-color:#326A16;
-webkit-filter:drop-shadow(0px 0px 5px #000000);
border-radius:20%/34%;
}
.dialog-box:before {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-right: 21px solid transparent;
border-left: 18px solid transparent;
border-top: 42px solid #326A16;
margin:195.71428571428572px 90px;
}
.dialog-box p {
display:inline-block;
width:260px;
margin:20px;
text-wrap:normal;
word-break:break-all;
}
<div class="dialog-box">
<p>hi there?kjhkjhkgygyfyjfffhjvhvvjhjassasasasa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa c c vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p>
</div>

Try like this: Demo
CSS:
.dialog-box p {
display:block;
margin:10% 14%;
width:80%;
word-wrap: break-word;
}

.dialog-box p {
display: block;
height: 180px;
margin: 10% 14%;
overflow: hidden;
word-wrap: break-word;
}

Use this
dialog-box p {
margin: 10% 10%;
padding: 13px 0px 0px 0px;
word-wrap: break-word;
}

JSFIDDLe
http://jsfiddle.net/2y1wj0mm/4/
.dialog-box p {
//you can use inline-block also but you need to adjust the margin and padding
display:block;
margin:10%;
width:80%;
word-wrap: break-word;
padding:5%;
}
BY default p is a Block level element. so default css will be applied here
So you cannot use as inline element

center vertical line between divs

I have a div named welcome-inputs and within other two left and right
The div named left needs to be on the left side welcome-inputs and the div named right right side of welcome-inputs.
left and right have width = 100px
Need for a line that is at the MIDDLE of the two, signaling the separation.
view the code: http://jsfiddle.net/gn1asdmh/3/
The red line must be in the middle of the images (the images represent left and right)

jsFiddle demo
Add a span element between .left and .right
<span class="middleLine"></span>
CSS:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
text-align:center; /* ADD THIS */
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
/*border-right: 3px solid red; REMOVE THIS */
}
.right {
float: right;
}
body {
background:blue;
}
span.middleLine{
display:inline-block;
border-right: 2px solid red;
margin-left:-1px; /* cause the border is 2px */
height:100%;
}

JSFiddle
The other way to resolve it.
.left {
position:absolute;
top: 0;
left: 0;
}
.right {
position:absolute;
top: 0;
right: 0;
}

If you add position: relative to .welcome-inputs, you can use an ::after or ::before pseudo-element on .left or .right like this:
.left::after {
border-right: 3px solid red;
content: "";
height: 100px;
position: absolute;
top: 0;
left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}
and get rid of the border-right on .left
JSFiddle Here

Just use generated content on the parent element. There is no reason in the given example to use structural markup for this.
Updated fiddle, http://jsfiddle.net/gn1asdmh/26/
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative;
}
.welcome-inputs::before {
content: '';
display: block;
position: absolute;
outline: 1px solid red;
left: 50%;
width: 0;
height: 100px;
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
}
.right {
float: right;
}
body {
background:blue;
}

The cleanest way to do it would be to use an HTML table. This will keep it responsive. Try something like the below code.
.welcome-inputs {
width: 100%;
}
#leftInput,
#rightInput {
width: 100px;
}
#separatorInput {
text-align: center;
}
#dividingLine {
display: inline-block;
height: 100%;
width: 5px;
background: red;
}
<table class="welcome-inputs">
<tr>
<td id="leftInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
<td id="separatorInput"><div id="dividingLine"</td>
<td id="rightInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
</tr>
</table>

Even better: no need to use any empty/dummy elements. We rely on using pseudo-elements instead. In this case I will use ::before:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative; /* new property added to original one */
}
.welcome-inputs::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
Just remember to declare position: relative on the parent element. See fiddle here: http://jsfiddle.net/teddyrised/gn1asdmh/28/
p/s: You might want to use vendor prefixes for transform, to maximise cross-browser compatibility.

to add some idea to these answers , you may think as well of :box-sizing, calc() for instance , or even a simple background image/repeat/sizing

How to make a div with a fixed width push another div with a relative width when resizing the browser window?

I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}

I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}

Centering li elements of an unordered list using CSS

My ul has a few free li elements which have images in them and I wanted to center those li elements. I tried to find the solution but am facing a hard time to figuring it out. Could you guys suggest some way of doing it. I was thinking of surrounding the ul with a div, and then centering the ul within the div. Do you think that will work? I also wanted to mention that I wanted to maintain the float left property.
Here is the code:
<ul class="thumb">
<li><img src="photos/home9.jpg" /></li>
<li><img src="photos/home1.jpg" /></li>
<li><img src="photos/home3.jpg" /></li>
<li><img src="photos/home4.jpg" /></li>
</ul>
CSS:
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
}
.thumb li {
float: left;
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

You need to make your li's inline-blocks, instead of float. In short, doing so will cause your li's to take up space like a block element, but behave like an inline element, which will make them follow a text-align:center; that you will want to add to your ul element. Visually, they will appear sort of like a "centered float," for lack of a better term.
Here's the CSS and a jsfiddle (http://jsfiddle.net/rgthree/RTt8g/):
.thumb {
list-style: none;
width: 90%;
margin: auto;
height: 750px;
text-align:center; /* center inline and inline-block elements */
}
.thumb li {
display:inline-block; /* no float; by making these inline-blocks they will center b/c their parent is text-align:center */
}
.thumb li img {
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

If you want to keep the float:left; then you will need to add a container div to the ul with a width and margin:auto;
Here is how:
http://codepen.io/anon/pen/jneEq
But this will only cause the ul to appear centred if you set the width exactly to the width of the images.

If you want to center the images, then you will need to add this:
ul {
text-align: center;
}
If you center the ul which is a child for the div, the ul will be placed in the center, but the li items won't be. So it would be better if you place the list items in the center, you can moreover add the margin: 0; padding: 0 to the ul too! as
ul {
margin: 0;
padding: 0;
}
I hope this way you will have the images placed in center when there is no other margins and paddings! :)
You can try all this here: http://jsfiddle.net/afzaal_ahmad_zeeshan/b29D8/

can you check this up ?
I have updated the css to use text-align: center;
.thumb li {
text-align:center;
}
http://jsfiddle.net/XZt2b/

If you have no luck with the other options, you can use:
li {
display:block;
width: 200px;
margin: 0 auto;
}
This will make sure they are always in the middle of the available space.

You also might want to remove
.thumb li {
float: left;
}
As well as consider Afzaal's answer
http://jsfiddle.net/EbCZ4/

One way to accomplish this is to set display: block; margin: auto on the <img> elements.
http://codepen.io/jessegavin/pen/jBpdo
.thumb {
list-style: none;
width: 90%;
height: 750px;
}
.thumb li img {
display: block;
margin: auto;
height: 200px;
width: 200px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
}

I try to make it with a little bit jquery, try it:
var totalWidth = 0;
$('.thumb > ul > li').each(function(){
totalWidth+= $(this).width();
});
$('.thumb > ul').css('width', totalWidth + 'px');
Here is full demo