I am just trying to get the image box to slide up next to the BBD logo and I can't seem to figure it out.
A bit new to css and floats, etc. Can anyone offer a suggestion???
I'm working off of a template, so didn't set up the css myself.
Thanks!
link text
You will need to float both the div with the bbd logo and the div.slideshowgallery. When both siblings are floated (left for example), they will be next to each other (if the width of the containing block permits it).
A suggestion? I can give you that.
#sliderWrapper > div { float: left; }
Add this CSS and your divs will be side by side. Rounded corners and the background will break. To solve the background, add <div class="clear"></div> to the bottom of the sliderWrapper div. The rest... no idea.
always remember to work with a wrap container with a specific width otherwise is very difficult, to make this with a elastic design.
and then just float both divs... ideally on the same side and spearate them with their own margins.
Related
I've looked around for answers and I've tried plugging in everything I can think of, but I can't seem to figure this one out. I feel like I'm probably overlooking something really simple and obvious, but any help you can give would be really appreciated!
Basically I'm trying to customize this page so that the little character boxes are horizontally centered within their .wrapper div.
While the div itself is centered horizontally in the middle of the page (I've used padding: 0 15% for that), the content inside it is not.
Here is a pastebin of the entire code if anyone would like it. The relevant section is line 140. Thanks in advance for any help you can give!
The problem is the div containing the individual character boxes are using absolute positioning so any style you try to use on the wrapper div that contains them to center them will be overwritten by the absolute positioning. You could probably change the javascript that is writing the absolute positions to center the boxes in the wrapper div or you could possibly pad the wrapper. I was playing around with the numbers and had a couple boxes centered within the wrapper div but when it's resized the javascript rewrites the positions. I would've used bootstrap to make this page instead of using javascript to reposition things on resize.
Another alternative is
1) Remove padding on your wrapper div and set text-align center
2) For each of the character box, I am not sure what you are using the javascript for. If the javascript have no other use other than making those boxes horizontally center, you can remove it.
.chara remove the float center, remove height, add display inline-block, add padding 25px 0
3) .charaimg remove position relative, remove top, remove left
4) .charatitle remove height, remove position absolute, remove bottom 0
5) In your HTML switch the .charaimg and .charatitle
That should do.
And also for future question, it helps a lot if you can put your code in codepen or jsfiddle. It makes life easier for people who are helping you.
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.