I was just wondering if there was any disadvantages for having empty divs in place in order to have a layout that I desire. Is there any other way around having hidden divs because I know that it adds to messy code.
See images below for what I am trying to demonstrate:
As you can see, the bullet points on the left are level with the h2 element but when I add a h2 element before the bullet points, it lowers them to the level of the paragraph (which is how I want it). Obviously I can make this h2 element invisible and therefore achieve my desired effect but is there more of a professional way of doing this?
But why you want to do that? Whats margin-top property for?
I'll go lil brief here, you should first learn floats than go for positioning, also learn what block and inline elements are, you got a lot of CSS things out there, margins,paddings` etc, take a look at box-model too so that you don't pull your hair later
And if you want to stick to a dirty markup than empty div's and br are options for you, but you won't get a specific height from top using br so for that you need to use an empty div but DON'T USE THIS
Two suggestions which will provide a quick fix:
Margin-top on the bullet points element or.
Add an H2 with a non-breaking space inside it e.g.
<h2> </h2>
If you want to add extra space without CSS, you can use <br/>
tags - its definitely a much better than empty divs, which is messy and a bad practice.
CSS is really the best way, though.
Give the h2 a width so it takes up the entire rest of the row. The bullet list will then automatically drop to the same height as the left paragraphs.
Or, give the bullet list a margin-top or padding-top.
I suggest that you use either margin-top for the second div or margin-bottom for the first one.
Example: If the hidden div's height is 100px, you better write: <div style="margin-bottom:100px">...</div>
Related
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
I have multiple questions. If I want an inline list to be a certain height/width is it better to use display:inline; and set the height and width to the <ul> element ? Or should I use float:left; and apply overflow:hidden; to the <ul> element? Also, is it better to apply the margin/padding the the <li> element or the <a> inside the list? Do you even need to if you reset the values? Will each occupy as much space as they can or will the last-child be longer to accommodate for excess space?
Your question is pretty theoretical.
You probably need to explain more what you're trying to do because there are benefits and drawbacks to what you're talking about.
For example, pure "inline" elements height or width will be ignored. You need to use a block-level element to do that, which includes floated blocks or "inline-block".
http://jsfiddle.net/3YU3y/3/
And if you float, it might position itself differently than what you're expected.
If you're looking to do a horizontal list vs an "inline list", then there's plenty of design patterns out there for that. Check out Dan Cederholms website for some real common HTML/CSS patterns:
http://pea.rs
Check out "lists" and "navigation" in particular.
Hope that helps!
Cheers!
I prefer to display inline as it seems to make more sense to me to use that over floating something that I suspect was never intended to be floated.
Floating things is very handy for layouts and inlining lists but I am guessing not its original intent.
I would apply all styling to the inside element (A), not the list. I'd style the list for float:, position: or display: only; Whether you use use inline or float is up to you. Just make sure you use display:block on the A-tag.
See my tutorial: http://preview.moveable.com/JM/ilovelists/
Here's a good example I put together to play with. It breaks down each of the concepts you're looking for.
Use display:inline. Via CSS set a width to your li if you want a fixed width. Use line-height for a fixed height.
This is bothering the crap out of me and I can't see what's not allowing it to float left.
I've set a margin-left of 120px to the header text (450 Set, 230 Set, etc.) and did a float left to the link element with the image inside of it.
Here's the link to the site where it's happening: http://cl.ly/6lQa
What am I over looking or not seeing?
Thanks!
It's the h2 tag that's screwing it up. Use a div tag instead and apply the styles that you want.
Generally, I refrain from using the h1,h2,h3,h4..... tags because they come with pre-done stylings. I prefer to create classes for all of my stylings and use div or span tags. Only if I'm doing SEO, I'll use some h1,h2 tags at the top, but nothing more than that.
On a side note, you should also try to get away from relying on float. It is not a good way to go..... different browsers handle it differently, and many times I get errors like what you were getting here. Instead of float, use position:relative and place the elements on the page by specifying the pixels at which you would like them (e.g. left:200px, top:100px etc).
I just started using BlueprintCss, which provides a great framework to easily layout pages. It divides the page up in a grid, and using pre-defined classes, you layout the page (without floats!). It's amazing, you should look into it.
You should move <h2 class="entry-title"> above the a element containing your image.
Set a width on the <h2> that will fit into the remaining space (with the 120px margin) OR better yet use a <div> instead of the h2 and style the font the same way
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.