homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to set column with paragraph
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657135 posted 4:44 pm on Mar 25, 2014 (gmt 0)

I have sample code like:
.column {
overflow: hidden;
float: left;
width: 30%;
}
When tested it will be paragraph text like
<p>dfeferwgewrg</p> outside column. How to set in the correct way as overflow: hidden; works but .column defines already width.

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4657135 posted 8:45 pm on Mar 25, 2014 (gmt 0)

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?

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657135 posted 7:37 am on Mar 26, 2014 (gmt 0)

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.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4657135 posted 7:59 pm on Mar 26, 2014 (gmt 0)

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?"

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657135 posted 7:25 am on Mar 27, 2014 (gmt 0)

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]

tangor

WebmasterWorld Senior Member tangor us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4657135 posted 7:44 am on Mar 27, 2014 (gmt 0)

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.

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4657135 posted 10:05 am on Mar 27, 2014 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved