I have this layout:
<ul style="white-space:nowrap;">
<li style="width:200px; display:inline-block;"></li>
<li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>
I have managed to stop the ul from wrapping which is a start. However, the content in the 2nd li continues off screen. Overlapping its parent elements etc.
I need the 2nd li to take up the slack and be dynamic in width unlike the first li. And I need the text to wrap inside the 2nd li.
li {display:table;}
is your friend. Also, don't forget to remove inline-styles!
Try white-space: normal on the li elements.
white-space is inherited by default so they received nowrap from the ul.
I'm starting to think that you are using an ul for layout purposes which div might be better suited for:
<div class="Item">
<div class="ImageContainer"><img src="" alt="/></div>
<div class="TextContainer">Text text text text text</div>
</div>
.Item {
width: 200px;
overflow: auto;
}
.ImageContainer {
float: left;
width: 40%;
}
.TextContainer {
float: left;
width: 60%;
}
Sounds like you might actually want to use a table.
Otherwise, if you know the width of the image, float it left and give the next element a left margin greater than or equal to the width of the image.
For example:
article > img {
float: left;
height: 80px;
width: 80px;
}
article > div {
margin-left: 90px;
}
<article>
<img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
<div>
<h4>Matt Di Pasquale</h3>
<p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p>
</div>
</article>
This is a practical use case for CSS Grid Layout:
ul {
display: grid;
grid-template-columns: 200px 1fr;
column-gap: 10px;
}
li {
display: unset; /* reset user agent list-style */
}
img {
background: #00bcd4; /* style image background */
}
<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>
Creates two-column grid with 10px column gap. First grid item has 200px width to match your image and the second wrapping text.
If if content you're trying to wrap may contain long strings such as an absolute URL or scientific/medical terms like pneumonoultramicroscopicsilicovolcanoconiosis add overflow-wrap to the second li using the :last-of-type pseudo-class.
Related
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
I have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.
here is my html
<div class="slider-wrapper">
<div class="slider">
<div class="portfolio-overlay">
<div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
<div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
<div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
<div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
<div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
<div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>
</div>
</div>
and this is my css
.slider-wrapper {
padding: 25px 0 0;
}
.portfolio-single {
float: left;
width: 70%;
}
DEMO WITH ANIMATION
DEMO
.slider-wrapper {
overflow:hidden; /* to remove page scrollbars */
padding: 25px 0 0;
white-space:nowrap;
font-size:0; /* to remove ~4px whitespace */
}
.portfolio-single {
/*reset fontsize if needed*/
display:inline-block;
width:70%;
}
.portfolio-single img{
vertical-align:top;
width:100%;
}
Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.
As said above we than need to respectively set the slides to inline-block.
using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.
to remove it use on the parent element font-size:0;
If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.
vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.
It's because you gave each image a width of 70%. So each image was taking up a new line.
If you have 5 images, then the max width to have them all on the same line would be 20%. But with any padding/border/margin will add to that, so you might need to put under 20%.
http://jsfiddle.net/rNa9v/1/
.portfolio-single {
float: left;
width: 10%; /* changed to 10% instead of 70% */
}
Your img are in divs so they each take the full width of the page.
You can change this behavior by making the divs "inline":
.portfolio-single {display: inline-block;}
http://jsfiddle.net/9377D/2/
.portfolio-single {
float: left;
width: 16%; /* 100/6 */
}
You can calculate it ;-)
Here you can change the div option.It could solve the problem.
for further assistance follow the link.. : http://www.w3schools.com/css/css_align.asp
It 's a very simple question... at the first glance. And not so simple at the second. :-/
There are two divs: #content and #sidebar (in this order!) which are contained in a div #main. The #content div may have a very long tables or strings, and must not crop them or increase width of itself, so overflow:hidden and any kinds of flow is not allowed. The #sidebar div may be higher then #content. The #main div must have a height of the highest div inside, so "position: absolute; top: 0;" for #sidebar is not a solution.
The question: is it possible to set a #sidebar div to the left of #content div while not using any kind of float for #content and keeping all divs totally inside of #main?
I have made an illustration here: http://jsfiddle.net/dZLmu/
HTML
<div id="main">
<div id="content">
<p>It's a content area. It can contain a very long
tables or strings which must not be cropped by
overflow: hidden and must no extend a width of
div itself. Something like that:</p>
<p>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</p>
</div>
<div id="sidebar">
<p>It's a sidebar.</p>
<p>It can be higher then content area.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
</div>
<div id="clearfix"></div>
</div>
CSS
#main {
background-color: silver;
margin: 0 auto;
widht: 500px;
#position: relative;
}
#content {
background-color: green;
margin-left: 100px;
}
#sidebar {
background-color: red;
float: left;
width: 100px;
#position: absolute;
#top: 0;
}
#clearfix {
clear: both;
}
Like this
demo
css
#main {
background-color: silver;
margin: 0 auto;
display:table;
}
#content {
background-color: green;
display:table-cell;
word-break:break-all;
}
#sidebar {
background-color: red;
width: 100px;
display:table-cell;
}
#clearfix {
clear: both;
}
demo1
Probably the simplest thing would simply be to apply specific widths to both the #sidebar and #content elements, either as a percentage or pixel width (if you give the wrapper a set width). If you cannot specify a width for #content, but want to use floats, you can use calc().
fiddle
#content {
float:right;
width:calc(100% - 100px);
}
Where you simply subtract the width of the #sidebar element. This is not compatible with IE8, however. Check caniuse.com
This is simply meant as an alternative to other answers, based on what might fit the actual use-case
A possible solution:
#content {
background-color: green;
display: inline-block;
max-width: 100%;
border-left: 100px solid transparent;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#sidebar {
background-color: red;
float: left;
width: 100px;
margin-right: -100%;
position: relative;
}
What happens here? First, setting display:inline-block to #content changes the formatting context where #content lives from block to inline (containers becomes one-line text with one big word that contains the entire block of content inside). Then, we limit its outer height and add a transparent border that emulates margin and holds the place for the floating column. And last, we make the floating div take no horizontal place (by setting large negative margin) and change its effective z-index by setting relative position to it.
But wouldn't it easier just to swap two divs in the source code, so that sidebar comes first?
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
CSS Code
.container div {
display: inline-block;
}
HTML Code
<div class="container">
<div id="content">
<p>It's a content area. It can contain a very long
tables or strings which must not be cropped by
overflow: hidden and must no extend a width of
div itself. Something like that:</p>
<p>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</p>
</div>
<div id="sidebar">
<p>It's a sidebar.</p>
<p>It can be higher then content area.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
<p>Menu item #.</p>
</div>
</div>
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
Setting display attribute to table-cell also works
display:table-cell;
Hope this Helps
I have an image, followed horizontally by text, followed by an image, followed by text. I want the text to be higher, but margin-top doesn't work with span.
Here's the code I have (and ignore the bits in the {} brackets, those are things for use in tumblr custom themes):
<div class="activities">
<span class="activity"><img src="{image:First Activity Image}"/>
<span class="activityname">{text:First Activity Name}</span>
</span>
<span class="activity"><img src="{image:Second Activity Image}"/>
<span class="activityname">{text:Second Activity Name}<span>
</span>
</div>
I'd change it all over to but that would make each one appear on a new line.
Whoa there. Your CSS should follow the HTML, not the other way around. First mark it up semantically. It looks like you have a list, so let's use an ul:
<ul class="activities">
<li>
<img src="...">
<p>...</p>
</li>
...
</ul>
Then you can float your list items to the left:
.activities {
/* makes sure the container expands to fit the floated material */
overflow: hidden;
}
.activities > li {
float: left;
width: 300px; /* or something; you might want to change this number */
}
You can also float your image to the left:
.activities > li {
overflow: hidden; /* again, expand the container */
}
.activities > li > img {
float: left;
}
Then you can align the text to the center:
.activities > li > p {
text-align: center;
}
Try it.
Usage of ul li is the better option. You can easily place the content as of your wish.
Please give float:left to all the inner contents, after that you can easily play with the margin values.
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.