So i have this problem with divs. I have one div containting two other divs that are next to eachother, problem is that in the right div I have bunch of text and i want that text to start a new row when it goes to div #1 (his parents) max width.
Here's my HTML
<div id="parent">
<div id ="left"></div>
<div id ="right">
blahblablabla
</div>
</div>
Use the property word-wrap:break-word; in your CSS for <div id ="right">. You may also need to set overflow-x: hidden;.
maybe you want to put <div id="left"> inside <div id="right"> and just make the right div width = 100%?
Related
What I need is to place 12 divs in a row, with bootstrap.js grid system.
Each column of this row needs to have a border. So, if I put 12 divs with css-class for a column (xs-col-1)
it will break as I put a 1 pixels border to each column.
So my idea was to have an inner div. The problem is that the inner div doesn't stretch. I have tried to put with:100% but this makes not difference. The character inside the inner div goes outside the boundaries for the inner div. The inner div takes up more or less 10% av the width of the parent (xs-col-1).
As I need this on mobile, Im using xs-col-1. And I cannot specify the width in pixels for the inner div.
Is there a way to solve this?
Here is the code for the border put inside the parent. Issue here is that 12 columns will not be on the same row, the column number 12 will go to next row:
<div class="row">
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
</div>
And here is the code for the border put inside the child. Issue here is that the width for the child doesnt stretch. The letter inside the child is much wider than the inner div itself:
<div class="row">
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
</div>
Solution seems to be to use "display:table".
When I put this inside the inner div, then it stretched.
Ok here's what I have:
<div id='wrap' style='width:100%; height:100%;'>
<div id='parent'style='width:100%; height:100%;'>
</div>
<div>
Now I want a <div id='downleft'> which would be left: 0; bottom: 0;.
The ideal would have been if I just included id='downleft' inside the id='parent' which is responsive, like:
<div id='wrap' >
<div id='parent'>
<div id='downleft'></div>
</div>
<div>
Unfortunately parent is handled by a script and everything inside it is not generated in final website (there are some other divs generated inside it).
Question:
Is there any way that id='downleft' can always have a responsive position based on id='parent''s responsive height, on the bottom left of the page?
ps: Unfortunately jsfiddle doesn't support height:100% for an example
You can insert the content that is generated before downleft, so that the downleft would alwyas be the last element inside the parent.
eg `$("#downleft").before(javascript generated content)
`
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I have a block of html like this. Judging by the background color of the divs, the outer div is not containing the inner div, unless I remove "float:left" from the inner div, or add "float:left" to the outer div. Why is that? http://jsbin.com/ihiqoz/2/edit
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
You need to clear your float:
<div style="width:900px; background-color:#1EFF1E">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
<div style="clear: left;"></div>
</div>
Floating elements break out of the layout, so your div doesn't get considered by the elements around it. The clear css property forces an element to move after the last floating element, so when you place an empty div below your floating element by giving it the clear style, the outer div will stretch to contain it.
#ray; if you have float in your child element so you have to clear it's parent so just write overflow:hidden in it's parent div to clear it.
For Example:
<div style="width:900px; background-color:#1EFF1E; overflow:hidden">
<p>outside</p>
<div style="float:left; width: 25%; background-color:#BD78C8">
<p>inside</p>
</div>
</div>
read this article for more http://www.quirksmode.org/css/clearing.html
You can also add <BR> at the end of the div, after the floated one.
Edit: You need to clear the div.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.