Backtrack, please. Can you start by explaining in English exactly what you want to do?

"overflow: hidden" and "width: 30%" seems like a weird combination. 30% of what? Does the primary text-- the non-floating part-- have a width declaration in some other form, like ems or pixels?

Sorry if I was not clear.

Please find all code:

I have sample code like:
.column {
overflow: hidden;
float: left;
width: 30%;
}
.column p {
line-height: 1.3em;
padding: 7px;
}
<div class="column">
<h4>dfdwdwd</h4>

<img alt="" class="" src="images/image1.png">

<!--<h4></h4>-->
<p>dwdwqdwdwddwqdwdwdwdwq</p>

</div>

Why the content exceeds the boundary of the specified rendering box for an element like column?
Example works:
.column {
word-wrap: break-word;
float: left;
width: 30%;
}
As I understand I have box limited to 30%. Paragraph should be kept inside the boundary.

Why the content exceeds the boundary of the specified rendering box

What's the specified rendering box?

It's to your credit that you didn't dump out the entire contents of the entire css*-- but there's got to be more. As written, I simply don't see how there could even be any overflow, unless the window is so narrow that the longer words won't fit!


* "Well, how could I know whether the background color of the navigation header has an effect on the width of the sidebar or not?"

There is nothing more actually.
.column defines boundaries and paragraph should be inside 30%.
Rendering box is defined by .column.

Will be paragraph setting always inside boundaries of ID or CLASS elements?

It is hard to give all code due to complex issues. But this boundary (columns) are inside wrapper:
.wrapper {
float: left;
width: 100%;
}

I have done searches. If you have long URL like Amazon URL it will be needed
.comment-text {
word-wrap: break-word;
}

Solution was proposed:
-ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;

/* Non standard for webkit */
word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

URL: [css-tricks.com...]

See this example:
<div class=class="wrapper">

<div class=class="column">
<h4>Without break-word</h4>
<p>URL or any text
[mydomain.com_title_with_a_long_url_XXXXXXXXXXX...]
</p>

<div class=class="column">
<h4>Without break-word</h4>
<p>URL or any text
[mydomain.com_title_with_a_long_url_XXXXXXXXXXX...]
</p>
</div>

</div>

[edited by: toplisek at 7:47 am (utc) on Mar 27, 2014]

Is there another container in which the .column works? Else, your site is only 30% of visible?

Looks like there's a parent working against you... need more of your actual PAGE level CSS to see what's at work.

I have tested. H1 and paragraph p will not be inside 30% column class. This is the case where you put long text such as URL or long text without white space. Bootstrap can set
white-space as 'nowrap' but I did not find this active class inside code.

See example:
hhhhrthtrhrhrhrhrrhioppooioioo. It will go over column. It is not related to container. It is an issue with long text to be broken into shorter text.

I have checked also all CSS elements. It shows inside browser the following:
element {inline}
This is not inside CSS or Bootstrap white-space as 'nowrap'
Maybe somebody has other solution.