The solution is to simply not declare `width: 100%`.

The default is `width: auto`, which for block-level elements (such as `div`), will take the &quot;full space&quot; available anyway (different to how `width: 100%` does it).

**See:** http://jsfiddle.net/U7PhY/2/

Just in case it&#39;s not already clear from my answer: just don&#39;t set a `width` on the child `div`.

You might instead [be interested in `box-sizing: border-box`](https://stackoverflow.com/a/5219611/405015).

You can use `box-sizing` css property, it&#39;s crossbrowser(ie8+, and all real browsers) and pretty good solution for such cases:

    #childDiv{
       box-sizing: border-box;
       width: 100%; //or any percentage width you want
       padding: 50px;
    }

[Fiddle][1]


  [1]: http://jsfiddle.net/1tk00pcz/

If you put `position:relative;` on the outer element, the inner element will place itself according to this one. Then a `width:auto;` on the inner element will be the same as the width of the outer.

In your image you&#39;ve putting the padding outside the child. This is not the case. Padding adds to the width of an element, so if you add padding and give it a width of 100% it will have a width of 100% + padding. In order to what you are wanting you just need to either add padding to the parent div, or add a margin to the inner div. Because divs are block-level elements they will automatically expand to the width of their parent.

You don&#39;t even need `width: 100%` in your child div:

http://jsfiddle.net/DanielDZC/w2mev/1/

In case you want to use that padding space... then here&#39;s something:

http://jsfiddle.net/qD4zd/

All the colors are background colors.

**DISCLAIMER:** This question is similar to the stack overflow question [here][1], but none of those answers work for my problem, as I will explain later.

I&#39;m trying to copy a large table (~40M rows, 100+ columns) in postgres where a lot of the columns are indexed. Currently I use this bit of SQL:

    CREATE TABLE &lt;tablename&gt;_copy (LIKE &lt;tablename&gt; INCLUDING ALL);
    INSERT INTO &lt;tablename&gt;_copy SELECT * FROM &lt;tablename&gt;;

This method has two issues:

1. It adds the indices before data ingest, so it will take much longer than creating the table without indices and then indexing after copying all of the data.
2. This doesn&#39;t copy `SERIAL&#39; style columns properly. Instead of setting up a new &#39;counter&#39; on the the new table, it sets the default value of the column in the new table to the counter of the past table, meaning it won&#39;t increment as rows are added.

The table size makes indexing a real time issue. It also makes it infeasible to dump to a file to then re-ingest. I also don&#39;t have the advantage of a command line. I need to do this in SQL.

What I&#39;d like to do is either straight make an exact copy with some miracle command, or if that&#39;s not possible, to copy the table with all contraints but without indices, and make sure they&#39;re the constraints &#39;in spirit&#39; (aka a new counter for a SERIAL column). Then copy all of the data with a `SELECT *` and then copy over all of the indices.

**Sources**

1. [Stack Overflow question about database copying][1]: This isn&#39;t what I&#39;m asking for for three reasons
    - It uses the command line option `pg_dump -t x2 | sed &#39;s/x2/x3/g&#39; | psql` and in this setting I don&#39;t have access to the command line
    - It creates the indices pre data ingest, which is slow
    - It doesn&#39;t update the serial columns correctly as evidence by `default nextval(&#39;x1_id_seq&#39;::regclass)`

2. [Method to reset the sequence value for a postgres table][2]: This is great, but unfortunately it is very manual.

[1]:https://stackoverflow.com/questions/198141/copy-a-table-including-indexes-in-postgres
[2]:http://archives.postgresql.org/pgsql-admin/2005-06/msg00152.php
 

Completely copying a postgres table with SQL

I want to map objects of a given class to objects of another. The class I want to use as key, however, was not written by me and is a simple `struct` with a few values. std::map orders it&#39;s contents, and I was wondering how it does it, and if any arbitrary class can be used as a key or if there&#39;s a set of requirements (operators and what not) that need to be defined.

If so, I could create a wrapper for the class implementing the operators map uses. I just need to know what I need to implement first, and none of the references for the class I [found online][1] specify them.


  [1]: http://en.cppreference.com/w/cpp/container/map

What requirements must std::map key classes meet to be valid keys?

I&#39;m looking for a solution to fit a child `div` into it&#39;s parent&#39;s `width`.

Most solutions I&#39;ve seen here **are not cross-browser compatible** (eg. `display: table-cell;` isn&#39;t supported in IE `&lt;=8`).

![image showing intended result with a child div being the full size of it&#39;s parent, with inner padding][1]

  [1]: http://i.stack.imgur.com/Fon6P.jpg 

Cross browser method to fit a child div to its parent&#39;s width

I'm looking for a solution to fit a child <code>div</code> into it's parent's <code>width</code>.
Most solutions I've seen here are not cross-browser compatible (eg. <code>display: table-cell;</code> isn't supported in IE <code>&#x3C;=8</code>).
<img src="http://i.stack.imgur.com/Fon6P.jpg" alt="image showing intended result with a child div being the full size of it&#x27;s parent, with inner padding">

I am having issues with an html table that is overflowing it&#39;s parent container.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .page {
        width: 280px;
        border:solid 1px blue;
    }

    .my-table {
        word-wrap: break-word; 
    }

    .my-table td {
        border:solid 1px #333;
    }


&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;page&quot;&gt;
        &lt;table class=&quot;my-table&quot;&gt;
            &lt;tr&gt;
                &lt;th&gt;Header Text&lt;/th&gt;
                &lt;th&gt;Col 1&lt;/th&gt;
                &lt;th&gt;Col 2&lt;/th&gt;
                &lt;th&gt;Col 3&lt;/th&gt;
                &lt;th&gt;Col 4&lt;/th&gt;
                &lt;th&gt;Header Text&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – p&#233;lagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]&lt;/td&gt;
                &lt;td&gt;some data&lt;/td&gt;
                &lt;td&gt;some data&lt;/td&gt;
                &lt;td&gt;some data&lt;/td&gt;
                &lt;td&gt;some data&lt;/td&gt;
                &lt;td&gt;An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – p&#233;lagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;    
    &lt;/div&gt;


&lt;!-- end snippet --&gt;

How can I force both the header text and the table cell text to wrap in a way that it will fit in its container properly?  I would prefer a CSS only method, but am also open to using Javascript (or jQuery) if absolutely necessary.

100% width table overflowing div container

Is there a language I can use to write my website&#39;s HTML, which:

* converts to HTML without having to write the HTML directly
* has all the power of HTML
* is less verbose than HTML and XML

For example, it should be to HTML what CoffeeScript is to JS.

Also, what is your experience with whatever you suggest?


Also have a look at [Comparison of web template engines][1] and [Scala Tags][2]


  [1]: http://en.wikipedia.org/wiki/Comparison_of_web_template_engines
  [2]: http://lihaoyi.github.io/scalatags/

Is there an alternative to HTML?

i have 2 divs and a dl:

    &lt;div id=&quot;wrap&quot;&gt;
     &lt;div id=&quot;header&quot;&gt;
      &lt;dl id=&quot;site_nav_global_primary&quot;&gt;

and this is my style:

    #wrap {
        margin:0 auto;
        width:100%;
        min-width:760px;
        max-width:1003px;
        overflow:hidden;
    }
    
    #header {
        width:100%;
        position:relative;
        float:left;
        padding-top:18px;
        margin-bottom:29px;
    }
    
    #site_nav_global_primary {    
        float:right;
        margin-right:18px;
        margin-bottom:11px;
        margin-left:18px;
    }

Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:

    #site_nav_global_primary {    
        position: absolute;
        width:100%;
        top:0px;
        left:0px;
    }

The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.

Is this possible?



CSS position absolute and full width problem

While designing a webpage, where should I put the following code?

` &lt;link rel=stylesheet type=&quot;text/css&quot; href=&quot;css/layout.css&quot;&gt;`

Should I put it in the `&lt;head&gt;` or should I put it in the `&lt;body&gt;`? 
Please clarify the following questions:

 1. What difference does it make if I put it in `&lt;head&gt;` or anywhere else around the HTML code?
 2. What if I am having two CSS (or Javascript) files? Since I can only include one file before another one, which file will be used by the web-browser to display the webpage?


Where should I put the CSS and Javascript code in an HTML webpage?

I use this code to right align a button. 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;p align=&quot;right&quot;&gt;
      &lt;input type=&quot;button&quot; value=&quot;Click Me&quot; /&gt;
    &lt;/p&gt;

&lt;!-- end snippet --&gt;

But `&lt;p&gt;` tags wastes some space, so looking to do the same with `&lt;span&gt;` or `&lt;div&gt;`.

Place a button right aligned

When I specify `text-align:center` for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected).

When I specify `text-align:center` for an element with a width that is less than the width of the text, the text is aligned to the left edge of the content box and overflows the right edge of the content box.

You can see the two cases in action [here][1].

Can any CSS magic make the text equally overflow both the left edge and the right edge of the content box, so that it stays centered?

  [1]: http://jsfiddle.net/ansciath/5EZKE/

Can overflow text be centered?

I&#39;ve got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.

How would I center multiple items with `position: relative` both vertically and horizontally when I won&#39;t know the the size of the parent div?

I know the `position: absolute` trick with negative margins, but this situation calls for something different.

Here&#39;s the code:

    .OuterCase { 
      position  : absolute; 
      width     : 100%;  
      height    : 100%; 
      text-align: center;
    }
    
    .InnerItem  { 
       width  : 38px;
       height : 38px;
       display: inline-block;
    }

I&#39;ve got it to center the items horizontally; it&#39;s getting the vertical that&#39;s being a bit elusive.




Center an item with position: relative

Here&#39;s my conundrum:
I have a page that uses Google Maps V3 and jQuery. It all worked well locally in FF5, Chrome and Safari. 

Once I uploaded to a web site, I get a &quot;google is not defined&quot; error on the first line that I try to use a google object

    var defaultLocation = new google.maps.LatLng(lat, lng);
It **only occurs in FF** and **only occurs remotely** (i.e., if I load the file into FF locally, it works well). Chrome and Safari seem to be working great regardless, as is my Android and iPod browsers.

Here&#39;s what I tried so far:

 1. Moved `&lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;` to top of the `&lt;head&gt;` section.
 2. Moved all content of `$(function() {...});` to a function called `initialize()` and added `&lt;body onload=&quot;initialize()&quot;&gt;`
 3. Played with scripts and css files order
 4. Pasted the URL http://maps.google.com/maps/api/js?sensor=false into FF address box and verified I&#39;m getting the legit script

But since this is only happening in FF on a remote machine and works well otherwise, I don&#39;t think it has anything to do with my code. Maybe the load order in FF5 is screwed. Maybe it prioritizes network resources differently than other browsers. I really do not know what to make of it at this point.

Any help is appreciated.  
Guy

**Update:**  
Just wanted to add the following fact: After trying the previous on a Mac, I tried FF5 in Windows, and have replicated the exact same behavior.  
For good measure, I tried Pale Moon as well - same results. Chrome 14, Opera 11.50 and even frickin&#39; IE9 (which wasn&#39;t included in the test plan) work. It just FF5, now on both Mac and Windows 7, that fails on that page.  

&quot;google is not defined&quot; when using Google Maps V3 in Firefox remotely

I&#39;ve recently seen a few links used without a protocol. It didn&#39;t seem too difficult to understand - I think it&#39;s a great idea and pretty intuitive.

For those of you unaware, using a URL like `//example.com/script.js` will point to either `http://example.com/script.js` or `https://example.com/script.js` depending on whether or not the URL originates from a **http** or **https** URL. Including http scripts or images from a https page can be a security concern, for example, so this solves that without the need for protocol detection in your code.

My question is, what sort of browser/OS support is there for it? Is it safe to use in production? It would certainly make things a bit easier.

Simple example and test:
http://codetester.org/916c6916

EDIT:
Just a follow up that I&#39;ve been using this for my company&#39;s ad server in production for many things without issue for a couple years now.

Browser support for URLs beginning with double slash

Since [`element.classList`][1] is not supported in IE 9 and Safari-5, what&#39;s an alternative cross-browser solution?

[No-frameworks][2] please.

Solution **must** work in at least **IE 9**, **Safari 5**, FireFox 4, Opera 11.5, and Chrome.

Related posts (but does not contain solution):

 1. https://stackoverflow.com/questions/2170878/how-to-add-and-remove-css-class

 2. https://stackoverflow.com/questions/5084182/add-and-remove-a-class-with-animation

 3. https://stackoverflow.com/questions/3066692/add-remove-class


  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList#Browser_compatibility
  [2]: http://vanilla-js.com/

How to add/remove a class in JavaScript?

**Where can I find a browser&#39;s default CSS for HTML elements?**

Many HTML elements come with some default CSS properties which can sometimes result in unknown/unwanted behaviour. For example Input boxes are displayed differently in different browsers. I&#39;m looking for a place that covers the new CSS3 properties and the new HTML5 elements.

I&#39;ve seen in other (much older) questions (such as https://stackoverflow.com/questions/32875/browsers-default-css) answers that suggest a solution of CSS reset. This solution is sometimes not wanted, often I would actually like to keep some of the basic properties (such as the highlighting of input boxes in Chrome). In other words: *I don&#39;t want to get rid of things just because I don&#39;t know what they do*.

So, **Is there a site that can give me all this information (or perhaps most)?**



Browsers&#39; default CSS for HTML elements

There`s some extra space under textarea tag. From 1 to 4 pixels in different browsers. The markup is very simple:

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
    
    &lt;html&gt;
        &lt;head&gt;
            &lt;style&gt;
                body {
    	            margin: 0;
    	            padding: 0;
                }
                .main {
    	            background-color: red;
                }
                textarea {
    	            background-color: gray;
    	            resize: none;
    	            margin: 0;
    	            border: 0 none;
    	            padding: 10px;
    	            height: 50px;
    	            overflow: hidden;
                }
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div class=&quot;main&quot;&gt;
                &lt;textarea&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/body&gt;
    &lt;/html&gt;


Here&#39;s how it is rendered in browsers:

![Screenshot][1]

Why is this happening? How to remove this extra space?


  [1]: http://i.stack.imgur.com/66R1y.jpg

Extra space under textarea, differs along browsers

I have my maven project setup as 1 shell projects and 4 children modules. When I try to build the shell. I get:

    [INFO] Scanning for projects...
    [ERROR] The build could not read 1 project -&gt; [Help 1]
    [ERROR]   
    [ERROR] The project module1:1.0_A0 (C:\module1\pom.xml) has 1 error
    [ERROR] Non-resolvable parent POM: Failure to find shell:pom:1.0_A0 in http://nyhub1.ny.ssmb.com:8081/nexus/content/repositories/JBoss/ was cached in the local repository, resolution will not be reattempted until the update interval of jboss has elapsed or updates are forced and &#39;parent.relativePath&#39; points at wrong local POM @ line 5, column 11 -&gt; [Help 2]

If I try to build a lone module I get the same error only replace module1, with whatever module it was.

Have them all referencing the parent in their poms.

    &lt;parent&gt;
		&lt;artifactId&gt;shell&lt;/artifactId&gt;
		&lt;groupId&gt;converter&lt;/groupId&gt;
		&lt;version&gt;1.0_A0&lt;/version&gt;
	&lt;/parent&gt;

Here is the relevant parts of the shell pom:

    &lt;groupId&gt;converter&lt;/groupId&gt;
    &lt;artifactId&gt;shell&lt;/artifactId&gt;
    &lt;version&gt;1.0_A0&lt;/version&gt;
    &lt;packaging&gt;pom&lt;/packaging&gt;
    &lt;name&gt;shell&lt;/name&gt;


    &lt;modules&gt;
        &lt;module&gt;module1&lt;/module&gt;
  	    &lt;module&gt;module2&lt;/module&gt;
  	    &lt;module&gt;module3&lt;/module&gt;
  	    &lt;module&gt;module4&lt;/module&gt;
	&lt;/modules&gt;



Maven: Non-resolvable parent POM

Hey i am searching in google but i can&#39;t fine any perfect answer
 
I want to Opacity in parent DIV but not Child  DIV


Example 

**HTML**

    &lt;div class=&quot;parent&quot;&gt;
    &lt;div class=&quot;child&quot;&gt;
    Hello I am child 
    &lt;/div&gt;
    &lt;/div&gt;
**Css**

    .parent{
    background:url(&#39;../images/madu.jpg&#39;) no-repeat 0 0;
    }
    .child{
    Color:black;
    }

**Note: --** I want to **background-image** in `Parent Div` not Color 

How to set opacity in parent div and not affect in child div?

I need to find an index of element inside its container by object reference. Strangely, I cannot find an easy way. No jQuery please - only DOM.

    UL
     LI
     LI
     LI - my index is 2
     LI

Yes, I could assign IDs to each element and loop through all nodes to match the ID but it seems a bad solution. Isn&#39;t there something nicer? 

So, say I have an object reference to the third LI as in the example above. How do I know it is index 2?

Thanks.

JavaScript DOM: Find Element Index In Container

As you can see in the CSS below, I want `child2` to position itself before `child1`. This is because the site I&#39;m currently developing should also work on mobile devices, on which the `child2` should be at the bottom, as it contains the navigation which I want below the content on the mobile devices. - Why not 2 masterpages? This is the only 2 `divs` which are repositioned in the entire HTML, so 2 masterpages for this minor change is an overkill.

HTML:

    &lt;div id=&quot;parent&quot;&gt;
        &lt;div class=&quot;child1&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;child2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS:

    parent { position: relative; width: 100%; }
    child1 { width: auto; margin-left: 160px; }
    child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

`child2` has dynamic height, as different subsites could have more or less navigation items.

I know that absolute positioned elements are removed from the flow, thus ignored by other elements.  
I tried setting `overflow:hidden;` on the parent div, but that didn&#39;t help, neither does the `clearfix`.

My last resort will be JavaScript to reposition the two `divs` accordingly, but for now I&#39;ll try and see if there exist a non-JavaScript way of doing this.

Make absolute positioned div expand parent div height

I have a website whose layout has been shown in the diagram. The body consists of a `main container`, which comprises of `header`, `parent div` and `footer`. The `parent div` further contains several `child div` as shown.

![Webpage Layout][1]

The problem being height of all the `child div` is finite. But the `parent div` contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.

The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for. 

Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.

Please comment if I am unclear in asking my doubt !


  [1]: http://i.stack.imgur.com/OIjF6.png

Content Type	Original Author	Original Content on Stackoverflow
Question	mate64	View Question on Stackoverflow
Solution 1 - Html	thirtydot	View Answer on Stackoverflow
Solution 2 - Html	Y.Puzyrenko	View Answer on Stackoverflow
Solution 3 - Html	Steeven	View Answer on Stackoverflow
Solution 4 - Html	Alex	View Answer on Stackoverflow
Solution 5 - Html	Daniel Gruszczyk	View Answer on Stackoverflow
Solution 6 - Html	Joonas	View Answer on Stackoverflow

Cross browser method to fit a child div to its parent's width

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Solution 6 - Html

What requirements must std::map key classes meet to be valid keys?

Completely copying a postgres table with SQL

Attributions