change div width based on content and browser width - javascript

Let's say I have something like below:
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>
My inner_div contains some texts. How do I make it so that I not only display my first image, my inner div and my second image next to one another and also make sure that the total width of my outer div expand to take the full width of the browser window (with my elements still displayed one next to each other no matter how long the text in my inner div becomes). Is this possible with just straight css or am I gonna need some jQuery to do that?
NOTE : The elements must also be vertically centered with regards to each other and within the outer div
Thank you

Actually, for the web standard, you shouldn't place <div> next to <img> or <img> next to <div>.
The solution to your question is to wrap all contents within #outer, say each item wrapped up in a tag, then applied some CSS to them (like float: left).
For example,
<div id="outer">
<div class="inner"><img src=".."/></div>
<div class="inner"><img src=".."/></div>
<div class="inner">some very long text</div>
</div>
Which
<style type="text/css">
.inner {
float: left;
}
</style>
If you also want it to vertically centered to outer, your css would be like this.
<style type="text/css">
#outer {
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
There are more approach to this, but I think this is the easiest one.
Hope this helps.

I think this is what you want, if I understand you correctly?
<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}
</style>

Try this
CSS
#outer{
width:100%;
}
#outer div, #outer img{
width:33%;
display:inline-block;
vertical-align:middle;
text-align:center;
}
HTML
<div id="outer">
<img src="my_first_image.gif" alt="My first image" />
<div id="inner_div">Some text here...</div>
<img src="my_second_image.gif" alt="My second image" />
</div>
Need some cross-old-browser work for inline-block, but you get the idea.
Presto http://jsfiddle.net/EPpAn/

I expect this is what you want: http://jsfiddle.net/linmic/CCut8/
Cheers

Related

Is it possible to center a relative positioned div that contains an absolute positioned div?

boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}

Why Firefox & IE breaks down my div boxes and place underneath each other?

I have 3 div boxes (with fixed width and dynamic height) that are set next to each other. This works fine in Chrome. But in Mozilla and IE, the boxes don't stay same, they break down themselves and sits on top of each other, what I definitely don't want to happen. Even if I minimize the window size (it happens with all browsers) the boxes break down and don't stay in the same row. I want to get rid of this problem. I want that whatever size the window have or what ever browser is used, the boxes shouldn't break down. They must still be able to fit next to each other.
See here
[NOTE/SIDE INFO: I have set the width of my each box 253 px because the max-width of my bosy is set as 1200px, and 253px is estimated so that they all can fit inside 1200px]
This piece of code I am working on:
.HTML:
<div class="box">box1box1box1box1box1<br>
</div>
<div class="box">Box2Box2Box2Box2Box2<br>
</div>
<div class="box">box3box3box3box3box3<br>
</div>
.CSS:
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
All you need to do is to put your content in a block-level container element with a width that's wide enough for the elements to not wrap to the next line:
http://jsfiddle.net/o8r97fhf/
HTML:
<div class="container">
<div class="box">box1box1box1box1box1<br /></div>
<div class="box">Box2Box2Box2Box2Box2<br /></div>
<div class="box">box3box3box3box3box3<br /></div>
</div>
CSS:
.container {
width:1161px;
}
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
The reason why it is doing this is because the <div class="box" /> elements have "display:inline-block;" - making them act more like an element such as <img /> where it has a height and width, but it is displayed inline, and if there's not enough room on one line, the elements will wrap to the next line.
Another thing you can try with the container <div /> element is to put "white-space: nowrap;" on it instead of specifying a particular width on it.
One thing I do when I'm messing around with CSS like this is, I will put a temporary "background-color:#F0F;" on the container <div /> element so I can see exactly what the dimensions look like, and what is really going on in the page.

div position argument breaks slider

I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.
Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2
You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO

Positioning div absolute inside td does not work in firefox

I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.

Css or javascript scroll transition?

I have two divs with:
width:100%; height:100%
so my whole document has an height of 200%;
both div`s have an link to each other,
now when i click on the link, i want that the site smoothly slides to the other div,
I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!
I tried to achive it with translateY, but it didnt worked!
Here is an exemplary code:
http://jsfiddle.net/hSU7R/
The HTML
<div class="full" id="one">
<span style="width:100%; background-color:blue">
<a href="#two" >Scroll to 2</a>
</span>
</div>
<div class="full" id="two">
<span style="width:100%; background-color:blue">
<a href="#one" >Scroll to 1</a></span>
</div>
The CSS
html,body {
width:100%;
height:100%;}
.full {
height:100%;
width:100%;}
#one {background-color:green}
#two {background-color:red}
Is this what you're looking for? A fork of your jsFiddle.
There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.
What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.
You can control the scroll (speed, direction, position(?)) behavior with css.
CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.
There is 'scroll-snap-points' wich might relate.
A CSS technique that allows customizable scrolling experiences like
pagination of carousels by setting defined snap points.
jsfiddled example
CSS
.gallery {
font-size: 0;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-points-x: repeat(1000px);
scroll-snap-type: mandatory;
white-space: nowrap;
width: 1000px;
}
img {
width: 100%;
}
HTML
<div class="gallery">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/1.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
<img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>

Categories