css – Aligning two elements differently in same div – Stack Overflow

<!DOCTYPE html>
<html>
<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>This is Jacob Yoo,‘18thcenturyprogrammer’,’junecnol’</title>

<style>
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);

* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
}
</style>

$(document).ready(function(){

});

</head>
<!– float 을 사용하지 않는 element들의 경우 사용하는 element를 document flow 에서 제거해서 생각하다. 추가로 element의 내용의 경우는 또 다른 이야기가 된다. –> 
<body>

<!– position:relative 를 꼭 사용해야 한다. –>


http://stackoverflow.com/questions/12202814/set-responsive-div-height-to-equal-its-sibling?newreg=c3a8ec80d8724b54a74573ab685d154a
 에서 참조

The simplest way to achieve this is to make the .right div absolutely positioned and setting top andbottom to 0.

Just remember to position the parent (.main) div relatively and remove all of the floats:

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

Working example: http://jsfiddle.net/5JU2t/1/

Note

The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:

Working example: http://jsfiddle.net/5JU2t/2/

http://css-tricks.com/almanac/properties/o/overflow/ 에서 참조

overflow

Last updated on: August 15, 2013

div {
  overflow:  visible | hidden | scroll | auto | inherit
}

View Demo

The overflow property controls what happens to content that breaks outside of its bounds. The default value is visible. So imagine a div in which you’ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible. Where if you set the overflow value to hidden, the image will cut off at 200px.

Remember that text will naturally wrap at the end of an element (unless white-space is changed) so text will rarely be the cause of overflow. Unless a height is set, text will just push an element taller as well. Overflow comes into play more commonly when explicit widths and heights are set and it would be undesirable for any content to spill out, or when scrolling is explicitly being avoided.

Visible

If you don’t set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are over-riding it from being set elsewhere.

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.

Hidden

The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.

This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.

Scroll

Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.

f note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.

Note: In OS X Lion, when scrollbars are set to only show when being used, scroll behaves more like auto, in that only needed scrollbars will show up.

Auto

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them. The scrollbars will only show up if there is content that actually breaks out of the element.

Float Clearing

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow (any value except visible) will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming thhttp://css-tricks.com/almanac/properties/o/overflow/at the height isn’t declared. Like this:

A better float clearing technique is the clearfix, as it doesn’t require you to alter the overflow property in a way you don’t need.

Can scrollbars be styled with CSS?

You used to be able to style scrollbars in IE (v5.5?) but no more. You can style them now again in WebKit browsers. If you need cross-browser custom scrollbars, look to JavaScript.

demo

Demos for this article taken from this sample page.

Browser Support

If an element needs to have scrollbars appended to honor the overflow value, Firefox puts them outside the element, keeping the visible width/height as declared. IE puts the scrollbars inside, keeping the overall width/height as declared.

Chrome Safari Firefox Opera IE Android iOSWorksWorksWorksWorksWorks?5+

To get native momentem scrolling on iOS 5+, you’ll need:

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

I’ve used this class for a bit now, and works like a charm. (note: I’ve only tested in FireFox and IE)

http://www.thesitewizard.com/css/center-div-block.shtml 에서 참조

How to Centre a DIV Block Using CSS

by Christopher Heng, thesitewizard.com

This article shows you how to centre (or “center” in US English) a DIV block, whether it contains text, graphics, or a mixture of both, using standards-compliant Cascading Style Sheets (CSS). The technique is useful not just for creating pleasing designs, but also for times when you want to create a fixed width single column layout with the main content placed in the centre of the page, and not flushed to one side.

Assumptions

I will assume in this article that you have some basic knowledge of how to write HTML and CSS.

If you don’t even have a website yet, and have arrived at this article looking for tips on designing one, please start with my article on How to Start/Create Your Own Website instead.

Steps to Centering a DIV Block without Centering the Text Inside

Let’s assume that you have a div block as follows:

This is a DIV block that is to be centred. I don't want the text to be centred, though, just the block.

At first glance, you may think that the following CSS rule will work.

text-align: center ;

However, the rule centres the text inside the box, rather than the block itself. While there are times when you may want to do this, our intention here is to centre the entire block but leave the internal contents formatted as it was before. As such, the above code is not what we want.

Instead, the standard trick to centring (“centering”) a block in CSS is to do the following:

  1. Specify a width for the DIV block.
  2. Set both its left and right margins to auto.

Both steps are necessary — that is, you cannot just set the margins to auto without specifying the width of the block and expect this method to work.

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.

For example, if you want your div block to have a width of 700 pixels, the following code will centre the block.

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

Incidentally, the width doesn’t need to be in pixels. Other units like em or percentage will work just as well.

Demo

At the time this article was written, you can see an example of this code in action on the Feedback Form Wizard Demo Site. The main body of that site has a width of 730 pixels, and is centred using the method given here, so that it appears in the middle of the browser window.

(Note: if your browser window is opened too small, or your monitor has too low a resolution, you will of course not be able to see the effect.)

Browser Support

The code above has been tested with IE 6, 7, Firefox, Opera and Safari. It should work in all later versions of IE as well, since the newer ones tend to be standards-compliant.

Note that this article only deals with the centring of a DIV block using CSS. If you want to centre a table, you will have to work around bugs in IE 6 and 7. In such a case, please see my article How to Centre a Table Using CSS in Nvu and KompoZer instead. Although that article is directed at Nvu and KompoZer users, the code itself is given in CSS and HTML so you should have no trouble following what is said.

Conclusion

The method above is the standard technique for centring a DIV block using standards-compliant CSS. With this, you can centre your blocks without using deprecated HTML tags like <center>. And the code even works in buggy browsers like IE 6 and 7.

This article can be found at http://www.thesitewizard.com/css/center-div-block.shtml

Copyright © 2008-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.