I have two fieldsets (as below) that are inside a div. They have been style inline and 50% width. In my head I think they should display on the same line but (at least in chrome, haven't checked IE or ff) the second one wraps to the next line.
I have a twofold question:
Why oh why oh why!?
Is there an easy fix for this? (other than maybe setting them to be 49.8% width)?
http://jsfiddle.net/z22KR/2/
*
{
box-sizing: border-box;
}
fieldset
{
margin: 0px;
border: 0px;
padding: 0px;
display: inline-block;
width: 50%;
background-color: grey;
}
div
{
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: green;
}
div div
{
background-color: red;
}
<div>
<fieldset>1</fieldset>
<fieldset>2</fieldset>
<div>div</div>
</div>
Edit I changed inline to inline-block as I intended. Sorry for the confusion there.
Edit2 Also would rather not do any floating if at all possible.
Edit3
My html looks more like
<div class="twoChildren">
<fieldset id="fieldset1"><legend>Fieldset 1</legend>
<div id="listofStuff1">
<table>
...
</table>
</div>
</fieldset>
<fieldset id="fieldset2"><legend>Fieldset 2</legend>
<div id="listofStuff2">
<table>
...
</table>
</div>
</fieldset>
</div>
The problem is caused by your HTML. All whitespace in HTML source code is displayed as a single space character - I'm not sure about the exact technical details of this. This space content between your div elements is what causes the second child div to wrap.
Changing the HTML code in your fiddle to the following solves your problem:
<div><!--
--><fieldset>1</fieldset><!--
--><fieldset>2</fieldset><!--
--><div>div</div><!--
--></div>
Or you could just write all tags adjacent to each other, as long as there's no whitespace between them.
There are many mistakes in your css, please study and write logically. btw do you want like this??
DEMO
EDIT
I find below things are not Good practice, please correct me if i am wrong
Using div div {} is misleading, better use class and id selector
also optimize your css , when you always need margin ,padding and border to 0px then why dont you write on the top with *{}
and also set the css in the order your elements are in the DOM, you first declare css for fieldeset then set css rule for div
#James Valid CSS is another issue and optimize CSS is another
Related
For past hours I've been struggling with the following problem:
I have two div elements wrapped inside a contaier, which itself is wrapped inside multiple other divs.
The container div has display:flex.
I have created a minimal code example hosted on codepen containing the same code listed in here
<div class="samples">
<div class="sample">
<div class="flex-parent">
<div class="div1">
<div>I'm div 1</div>
</div>
<div class="div2">I'm div 2</div>
</div>
</div>
</div>
The CSS code is pretty straight forward. I want the first element the be the
size of its content and the second one to grow the remaining width
* {
box-sizing: border-box;
}
.samples {
background: #2B2B2B;
}
.samples .sample {
padding: 50px;
}
.flex-parent {
border: 1px dashed green;
display: flex;
height: 100px;
}
.flex-parent .div1 {
flex-shrink: 0;
background-color: #D3394C;
}
.flex-parent .div2 {
flex-grow: 1;
}
But the surprising problem was that the first element was not extending fully in terms of height and leaving an empty pixel space after him, as you can see in the image below (made from codepen)
BUT
Looks like the problem solves itself when you remove this part
.samples .sample {
padding: 50px;
}
from the code, thus removing the padding of the sample wrapper.
BUT2 it shouldn't have any influence on the elements inside the other container, should it?
It believe it should be related to box-sizing: border-box, but I cannot understand why the child elements behave in such a strange way, given the fact that it should correctly have 198px height and leave no empty space after it.
What is the idea behind this, could somebody please explain?
EDIT1: looks like the issue is only present in latest versions of desktop Chrome (65.0.3325.181) and Edge (41.16299.248.0)
EDIT2: on older versions of Chrome (42), it is working as intended.
The problem was in my display scaling 125%, that generated the gap. Bringing it back to 100% solved it.
There must be some issues inside chrome and edge engines (because it works well in Firefox).
For more information, follow the link https://github.com/electron/electron/issues/8332
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
When I change my website to
<!DOCTYPE HTML>
Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...
Has anyone encountered this anomaly before and fixed it?
EDIT
Here is the JS FIDDLE
http://jsfiddle.net/fRpK6/
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
I often solve this by giving the image element display:block or display:inline-block as appropriate.
it is solved my problem.
line-height: 0;
I believe setting
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
apply display: block to the image fix it, i have this issue with images inside floated divs.
For me it was a combination of
font-size: 0px;
line-height: 0;
on the wrapping container that fixed it.
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
.placeholder {
font-size: 0px;
}
maybe it is the problem of the white-space that causes this.
so, the methods bellow maybe useful
img {
display: block;
}
or
img {
vertical-align: top/middle/...;
}
or
.placeholder {
font-size: 0;
}
In my special case none of the above solutions worked.
I had a wrapping div with display: flex;.
I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.
Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.
not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;
http://jsfiddle.net/fRpK6/3/
It also happens with piled up divs, just add float property.
Example:
<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>
Problematic CSS:
.piledUpDiv{
width:100%;
display:inline-block;
}
Solution:
.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.
I understand that there are several questions here about this problem, but I have a rather unique predicament. I'm working on a template that has to include certain tags, and has to work with other elements that are added to the template after I upload the code. I wouldn't worry about this, but I am having a time trying to get the footer to display at the bottom of the page. I can't alter anything about the footer, and it displays at the bottom of the div I'm using as a wrapper. The problem is if I set the height to a fixed value, there can only be so many comments made before the comment div overlaps the footer. I've tried several different solutions including setting the container div's height to auto, overflow to auto, bottom margin to 65 (height of the footer), and setting the overflow to scroll for the Comments div (resulted in very loose comments).
Here is an example of the problem and the template as it stands.
Here is the CSS styling for the container div (div id=Main)
#Main {
margin: 0px auto auto auto;
background-color: #808080;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: medium;
font-variant: normal;
color: #FFFFFF;
width: 900px;
position: relative;
}
Here's the CSS styling for the Comments div
#Comments {
background-color: #008080;
width: 450px;
height: auto;
top: 1750px;
left: 450px;
position: absolute;
overflow: auto;
}
And here's how the divs are stacked in the body
<div id="Main">
...
<div id="Comment_Form">
<!--[COMMENT_FORM=400,200]-->
</div>
<div id="Comments">
<!--[COMMENTS=400]-->
Comments
</div>
</div>
Since the page is going to be image heavy, I'm trying to keep the code lightweight (and probably failing at it pretty badly).
Thank you for your help and I'll post the template as of now if anyone needs it.
EDIT:
Okay, it's occurred to me that a) I need to redo the CSS and the divs that I have down, and b) I have no clue how to do it using pure CSS, or at least with out fighting it as one of you has said. What I'm trying to achieve is this:
I have no clue How to do this. and any help would be greatly appreciated (as well as any way to avoid having each and every element in its own div)
You seem to be really fighting your CSS on that page. Most of your elements are positioned absolutely within your #Main class. This will force you to specify a lot more layout than you really want to. It also means that if you have a variable quantity of comments or dynamic content, you'll find it that much harder to expand your content containers without others getting in the way.
I would strongly urge you to look at CSS frameworks or approaches that take advantage of grid layouts such as Nicole Sullivan's OOCSS framework.
You'll find that the structure (which has plenty of good, workable examples) is easy to follow and lends itself much more readily to the sorts of layouts that you're trying to achieve.
I hope this is helpful.
Here is a very basic layout that you can use.
In your CSS:
#header, #content, #comments{
margin: 0 auto;
width: 960px;
overflow: hidden;
}
#author-comments{
width: 100%;
}
#comment-box{
float: left;
width: 50%;
}
#comment-list{
float: right;
width: 50%;
}
In your markup:
<div id="header">
Header
</div>
<div id="content">
Contents
<div>
<div id="comments">
<div id="author-comments">
Author comments
</div>
<div id="comment-box">
Comment box
</div>
<div id="comment-list">
Comment list
</div>
</div>
It's really important that you use markup that makes sense without the styles. Don't see divs as plain boxes but as actual content containers that give structure to your document.
On a side note, you mentioned that you were concerned about the ammount of divs to keep your file light, compensating for the amount of images you're using. Don't worry about this. Text documents (such as HTML) are nothing compared to images in terms of file size. However, his doesn't mean you should throw markup as if it was free ;)
One last thing. I noticed that you are using <img> elements to render your decoration images. Try using CSS to set them as background images in the corresponding <div>s. This not only will help you to make cleaner and easier to implement structures, but also will draw a line between the images that represent content and those that represent decoration.
I'll write without any testing how I would code the layout on your image:
HTML:
<div id="header" class="centered"></div>
<div id="content" class="centered">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="comments" class="centered">
<div id="author-comments" class="centered"></div>
<div class="centered">
<div id="comment-field"></div>
<div id="user-comments"></div>
</div>
</div>
CSS:
* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }
Sorry, got no time to test now, but on first view, I don't see any problems with this code - write comments, if something doesn't work
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.