I created a DIV which on the right top corner must have two links (Menu and Options):
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
To align the ul on the right I used "float: right".
The online example is in: http://jsfiddle.net/y2hhm/8/
Each link text will be replace by an icon image using background-image.
It looks fine on the first DIV. But on the second the table is pushed down.
I also tried "position:absolute" but it makes hard to align it on the right.
Does anyone knows how to make the Menu/Options list look the same in both?
EDIT:
Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.
Perhaps you can turn to CSS resets if these pre-set properties annoy you.
-----------------------------
I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).
All you need to do is add this to your CSS: (tested and working in your fiddle)
ul {
padding: 0;
margin: 0;
}
Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).
NB: // are not valid CSS comments. Use /* */.
If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.
The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...
If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...
Related
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?
The HTML and CSS would be useful to answer this.
If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.
in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.
I used the display:inline-table in order to fix the bug that google chrome had encountered..
I've same issue in Chrome and I solve it by giving display:inline-table to parent div
The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.
I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>
You must give 1 div the height
For example
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.
I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.
Without a code example this really is just guessing
I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.
Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.
do you have any display: inline, block etc style properties set on any of those divs?
What about setting display:inline-block and the width for both divs?
EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.
I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.
I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.
Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.
also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.
Intent center h3 text, in relation to child block elements below it.
-
Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;
Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.
I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.
I'm no HTML hero so in my case the problem was really silly.
It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.
And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.
BASICALLY it was an unclosed div tag that was creating the problem :
<div class="seperator" </div> instead of <div class="seperator"> </div>
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}