I am using jQuery SimpleModal in order to display product information. For this I have two divs which are to be shown in one modal dialog: The left div holds the product logo and some description right underneath the logo. The right div holds detailled information about the product. The content in the right div can become quite long.
What I need the modal dialog to do is to keep the left div at its position while the right div scrolls if its content is too long. How can this be accomplished?
Here is my HTML structure within the modal dialog:
<div id="container">
<div id="leftColumn">
<div id="picture">
</div>
<div id="information">
</div>
</div>
<div id="rightColumn">
<p>Looooong text...</p>
</div>
</div>
Here the according CSS:
#leftColumn {
float: left;
}
#rightColumn {
overflow:auto;
}
if you use positioning in these divs it will be greatly helpful
setting up max-width:as you require; max-height:auto; can help you
Related
I have to style the tab slider in Wordpress, so the tab navigation div happens to be on top and the the content is under, I want to switch them but I can't
, the tab-content has position: relative already because of its content.
Here I try
css
.wrapper {
position: relative;
}
.tab-nav {
position:absolute;
bottom:0;
}
but tab-nav goes down but stick into the tab-content. so this way does not work.
<div class="wrapper">
<div class="tab-nav">
</div>
<div class="tab-content">
</div>
</div>
I want to use css to make the tab-nav is under the tab-content. its be better if we dont use "position"
In .tab-nav set z-index=-1; and then left / right and top / bottom attributes to place it where you want.
I have the following content as the first content
#content {
border-radius: 5px;
background:#FFFFFF;
text-align:left;
padding:20px 20px 5px;
margin:15px 0 15px 0;
}
inside them I have two divs that both float to left as below:
<div id="content">
<div class="my_left_menu">
//this floats left
</div>
<div class="my_right_content">
//this also floats left
</div>
</div>
Now in the right content I want to have a gallery of products like shown in on line shopping website. So I created another div class that floats left and placed all the images inside it, but every image is coming vertically. But I want it to be something gallery view or grid like view. How can I do it ? any idea please?
If I understood you right you want to show a grid-like list of products on your right side div that is div.my_right_content but they are shown vertically.
Basically what you need to do is to tell the inner div tags which are your products not to take all the width available. A simple way is to give them a fixed width and if the browser is resized or your page is being displayed on a smaller screen then they can align vertically to have enough space for your content. Here is what you can do:
<div id="content">
<div class="left-col">
</div>
<div class="right-col">
<div class="product">
... your product info and content
</div>
<div class="product">
... your product info and content
</div>
</div>
</div>
And then give them a style rule like this
.product {
width: 100%;
max-width: 200px;
display: inline-block;
}
So they will align horizontally and when the browser width is not enough to hold two 200px wide products horizontally they will be aligned vertically. This also means that if your .right-col container is 600px in width it will hold three products in each line.
If you want it to be more perfectly aligned you may want to give each product a fixed height too.
Regards,
Shakib
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 am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
I have a problem as I mentioned above.
In my web app, I'll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left
I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?
Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left
Here's the code
<div id="mainDIV" style="overflow:auto; width:100%;">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
You have to make sure that the containing div is wide enough to accommodate the floated div's side by side.
So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.
You need an additional wrapper if you want the scroll-bars to appear on mainDIV:
html:
<div id="mainDIV" style="overflow:auto; width:100%;">
<div id="wrapper">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
</div>
css:
#wrapper {
width: 1920px;
}
I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.
Either set float:left for all div tags
div {float:left;}
put all div tags to be floated left in the same class
<div class="className" style="width:960px; background-color:Red;">
a
</div>
div.className {float:left;}
Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/