Border is not displayed properly.Side and bottom ones
are missing.
here shorthand property is acting like top-border
property.
If we apply height tag to container than container than
borders are displayed correctly but it should work on its own.
CSS
.container
{
border:1px solid black;
}
.container DIV
{
width: 15px;
border: 1px solid Blue;
margin: 1px;
}
HTML
<div style="width: 200px; " class="container">
<div style="float: left;">1</div>
<div style="float: left;">2</div>
<div style="float: left;">3</div>
<div style="float: left;">4</div>
<div style="float: right;">5</div>
<div style="float: right;">6</div>
<div style="float: right;">7</div>
<div style="float: right;">8</div>
</div>
You need to provide more code (including the html that shows the actual container element). However, my guess from what you have said is that adding overflow:hidden to your style should fix it.
.container
{border:1px solid black;
margin:auto;
margin-top:33px;
overflow:hidden;
}
If elements within your container are floating, then the container acts like it has a height of 0. This would cause a border to be a single line at the top. Overflow:hidden gives it the height including any floating elements (see http://www.w3.org/TR/CSS21/visudet.html#root-height )
As I say, more code would be required to say if that is what the issue is in your case but it is a common cause of that style problem.
Update your container class like below.
.container
{
border:1px solid black;
display:table;
}
Fiddle DEMO
As you are using float property on child elements. to fix it just use overflow:hidden on parent element i.e. in your case use add overflow on class .container.
Here is a DEMO.
.container
{
border:1px solid black;
overflow:hidden;/* Added Line*/
}
Related
I am trying to align the child div tag but as per below image i specified width:auto , but all 3 div are aligned left.
fiddle link
is there any way i can make the child div expand automatically to make to fit the free space of parent div?
i came across several questions but not related to this, apologizes if its a duplicate.
Edit:
i want all the 3 divs to occupy 100% of the width. instead of aligning it to left. i cannot assign 33% to each because sometimes one of the child div may have more text.
here i have the image of how i expect...
some more clarification about what i expect
you can set width of child element with calc function.
62px = 20px of left and right padding, 40px of right and left margin and 2px of left and right border
width:calc((100% / 3) - 62px);
You can use table-cell or flex to achieve what u want (geting all the width from your parent). If not, then another way is to play with your childs width-percentage and maybe some display-inline.. also floating will mess that up, so remove it..
as i understand u ask smth like the above snippet:
#parent {
border: 1px solid #666;
width:100%;
min-height:150px;
display: table;
}
.child {
text-align:center;
border:1px solid #0000ff;
padding:20px;
background: #CCC;
margin:10px;
display:table-cell;
vertical-align:middle;
}
<div id="parent">
<div class="child">
test data 1
</div>
<div class="child">
test data 2
</div>
<div class="child">
test data 3
</div>
</div>
With the effect you are trying to accomplish. You don't want to float the divs. They just need to have the correct CSS.
CSS
#parent {
border: 1px solid #666;
width: 100%;
}
.child {
border:1px solid #0000ff;
background: #CCC;
padding: 20px 30px;
margin:20px 20px;
}
jsfiddle for vertical alignment
EDIT BELOW
If you want them all in a horizontal line, you need to remove the whitespace from the html elements and then assign the correct width and margins.
HTML
<div id="parent">
<div class="child">
test data 1
</div><!-- remove whitespace
--><div class="child">
test data 2
</div><!-- remove whitespace
--><div class="child">
test data 3
</div>
</div>
CSS
* {
box-sizing: border-box;
}
#parent {
border: 1px solid #666;
width: 100%;
}
.child {
border: 1px solid #0000ff;
background: #CCC;
width: 30%;
display: inline-block;
padding: 10px;
}
.child:nth-child(2) {
margin: 0px 5%;
}
Working Fiddle for horizontal alignment
why don't you try to use table. You can use 3 <td> tag (table data) inside a <tr> tag
I have a problem in floating a contenteditable div around a image. Here's my code:
HTML:
Section title
CSS:
.fl {
float: left;
}
.rgtDiv {
min-height: 300px;
border: solid 1px #ccc;
}
I want the rgtDiv to have left border at the right end of the image but right now it appears at the left end of the image.
When I click on the rgtDiv the cursor goes to the image and not inside the rgtDiv. How to make the cursor come inside the rgtDiv?
Also the border of the rgtDiv applies to the entire parent Div. How to make it to apply only for the rgtDiv.
Can anyone help resolving my problem?
Here's my jsfiddle link: http://jsfiddle.net/n8WJ2/
Thanks in advance!
yadav
try giving the rgtDiv a float: left; and a width ...
should work and don´t forget to clear your floats
You can add this:
.rgtDiv {
position: relative;
overflow:hidden;
min-height: 300px;
border: solid 1px #ccc;
}
Demo
It will resize depending of the width of the image.
Try this
HTML
<div>
<div class="section-title">Section title</div>
<div class="rgtDiv">
<img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300"/>
<div contenteditable="true" class="editableblock"></div>
</div>
CSS
.fl, .rgtDiv img {
float: left;
}
.rgtDiv {
border: solid 1px #ccc;
display:block;
}
.editableblock {
min-height: 300px;
}
If anyone still cares.
To workaround the issue with caret position, you can add zero-width space to the div in HTML:
<div contenteditable="true" class="rgtDiv"></div>
and restore it every time user clears it:
$('.rgtDiv').keyup(function(){
if($(this).text().length == 0){
$(this).text('\u200B');
}
});
Demo
overflow: hidden can be used for the contenteditable block :empty pseudo-class.
Please note that it has to be really empty: no spaces or tabs inside, just <div contenteditable="true"></div>
I would like to create a div container with fixed width and height of 100px and it should work like a window.
Then in addition
It should have content divs into it next to each other 'floating' left, not breaking into a new line.
The container should hide all what is longer as it width or height.
Do I have to use
overflow:hidden
?
fiddle here:
container and content
http://jsfiddle.net/hd8Bm/1/
Here is a sample HTML structure:
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
Here is what the CSS needs to be like:
#container
{
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid #000;
overflow: auto;
white-space: nowrap;
}
.content
{
width: 50px;
height: 50px;
display: inline-block;
border: 1px dashed #000;
}
Here is a working fiddle:
http://jsfiddle.net/HB8kB/
The trick is done by white-space: nowrap;
This is what you want.
http://jsfiddle.net/hd8Bm/9/
display:inline was not necessary.
OK, if you want to hide something, or prevent it from being clicked, position:absolute may work, on newer browsers, I mean. float:left is sometimes helpful, too.
i have this div class called 'answer_box', for each page thier will be 4 different answer boxes with different text each time. i want to make each answer have the same distance between each other, whether the box has a lot of text or little, to keep the design consistant.
my html code:
<div id="app">
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers"> little bit of text</span>
</div>
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers">you have priotrtoities over the people on the opposite direction</span>
</div>
<div class="answer_box">
<div class="answer_checkbox"></div>
<span class="answers">you have priotrtoities over the people on the opposite direction</span>
</div>
</div>
jsfiddle is here: http://jsfiddle.net/24E6W/1/
Use the following CSS
.answer_box {
margin-top: 20px;
clear:both;
overflow: hidden;
}
Is this the effect you want? jsfiddle.net/24E6W/3/
.answer_box {
margin:30px 0px;
height:50px;
}
.answer_checkbox {
height: 50px;
width: 50px;
background-color: black;
float: left;
margin-right: 5px;
}
Either set min-height on the answer_box div to cover the deepest box, or let jquery do it for you:
using min-height (css only)
quick fiddle using jquery
This will make the boxes the same height as the tallest one, the distance between each answer is set by the margin-top: rule. I'm assuming the .answer_checkbox div needs to be a consistent height
Just add this 2 properties to your class named ".answer_box"
.answer_box{
margin-top: 20px;
border-top:1px solid #000000;
display:block;
clear:both;
overflow:hidden;
}
Checkout jsfiddle here...
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)