This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag
Related
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
I want to create a sortable list in which sorting features will be in left column and right column will contain the list items (the items are blocks with some information)
I have written following code :
HTML :
<div id="container" style="width:auto;">
<div id="item-menu">
Sort items by : </div>
<div id="content-items">
<div id="item"> content</div>
<div id="item"> content</div>
</div>
</div>
CSS:
#item-menu {
width:15%;
float:left;
border-right:1px dotted #333333;
}
#content-itemss {
float:left;
padding-left:20px;
width:85%;
}
#item {
display:block;
background:#333;
border:1px dotted #000000;
color:#FFF;
width:inherit;
margin:10px 10px;
padding:10px 10px;
}
However, the list items somehow end up messing with the layout. Here's the screenshot..
How to correct this? Also, is there any easy way like some WYSIWYG editor for such CSS designs?
To achieve the layout you wanted, I changed the box-model to border-box which means that padding given to an element becomes part of it's width. (http://css-tricks.com/the-css-box-model/)
I added a clearfix class to parent elements that hold floated children, because this causes the parent to collapse. (http://css-tricks.com/all-about-floats/)
fiddle: http://jsfiddle.net/dHc8W/
Code:
* { box-sizing: border-box; }
.clear:after {
content: "";
display: table;
clear: both;
}
#container {
width: 100%;
}
#item-menu {
width:15%;
float:left;
border-right:1px dotted #333333;
}
#content-items {
float:left;
padding-left:20px;
width:85%;
}
.item {
background:#333;
border:1px dotted #000000;
color:#FFF;
width:inherit;
margin:10px 10px;
padding:10px 10px;
}
These may or may not work depending on how you want the 'content' to display.
But as far as I can tell with the given code they give the desired result.
You'll probably want to adjust the padding: and margin: if you want it flush with the top.
Solution #1
This method will behave strangely if the actual content is greater than the max-width:.
Works with smaller content.
CSS
#content-items {
float:left;
padding-left:20px;
max-width:85%; /*changed to 'max-width'*/
}
http://jsfiddle.net/sP6t2/
Solution #2 (suggested method)
if you want the content to always be longer, decreasing to width:84% will bump up the content.
http://jsfiddle.net/sP6t2/1/
I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?
Example: https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing
The code I currently have:
<style type="text/css">
.maindiv{
position: relative;
width:90%;
height:50%;
border-style:solid;
border-color:Red;
border-width:2px;
}
.imgbott{
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
</style>
<body>
<div class="maindiv">
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
</div>
</body>
Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec
Thank you.
Change your css to:
.imgbott{
margin: 0px 10px;
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
The margin: 0px 10px means 0px margin to the top and bottom, and 10px margin to the left and right. Maybe one would expect 20px margin between the divs then, but there is a effect called "margin collapsing" which prevents that.
is this what you looking for
http://jsfiddle.net/Gfnjz/
.box {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
You can do something like this:
.divName{
width:300px;
display: inline-block;
margin: 0 20px 0 0;
float: left;
}
Then for the last box, apply a .lastBox class as well to force no margin, that way they are perfectly centered, assuming your parent container is centered that is:
.lastBox{
margin-right: 0;
}
The HTML:
<div class="divName">
<p>stuff</p>
</div>
<div class="divName">
<p>stuff</p>
</div>
<div class="divName lastBox">
<p>stuff</p>
</div>
if you only want the same space between the "imgbott" divs, set their margin instead of width attribute.
Your class will looks like
.imgbott{
margin: 0px 10px;
float: left;
text-align: center;
}
.imgbott a
{
display:block;
}
Then doesn't matter what is the width of the images inside, the space will always be 20px between the images.
In additional you can remove the margin-left of the first image using the first-child selector
.imgbott:first-child {
margin-left:0px;
}
You can achieve this result by using inline-blocks and text-align: justify, with adding some fake content before and after the divs to be aligned via pseudo-elements:
.maindiv{
width:90%;
border: 2px solid red;
text-align: justify; /* turns on justification 'magic' */
line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {
font-size: .1px;
content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {
font-size: .1px;
content: 'i i'; /* adds nearly invisible fake content in the of the line */
word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
background: #ccc;
}
.imgbott{
display: inline-block;
line-height: 1; /* restore the normal line height inside divs */
}
JSFiddle
Optionally, you can prohibit the wrapping of the divs if the container is narrower than the sum of their widths by adding white-space: nowrap to the container and normal to its :after: see edited JSFiddle
This solution may look a bit tricky, but it works for arbitrary number of blocks of arbitrary (possibly different) widths.
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}