I'm pretty much at wits end right about now and can't seem to figure out why my divs aren't pushing content down on the page. If you go to http://www.wilwaldon.com/itsbroken/template.php you'll notice that the thumbnails on the right side are getting hidden behind the content below them.
I'd like the thumbnails to push the bottom content down as opposed to being behind it.
Any help would be greatly appreciated and you'd pretty much save my brain from exploding at this point.
Thank you in advance!
If I was you, I would try following:
Try to exclude the "" from "videoplayerwrap" and rather put it on the same level in your HTML tree, so instead of:
#videoselectwrap
#videoplayerwrap
- #videoplayertop
- #videoplayercenter
- #videoplayerbottom
- #video_bottom
will be:
#videoselectwrap
#videoplayerwrap
- #videoplayertop
- #videoplayercenter
- #videoplayerbottom
#video_bottom
Also, put <div class="clearfix"> </div>" immediately before closing tag of #video_bottom.
That should work :]
I think it is because your videopageprofile and videoresourceswrapper are nested inside video_bottom. I suggest pulling them out of video_bottom and putting them in a separate div nested in videoplayerwrap.
Related
Ok. I've gone to many places to find an answer, and I've tried many of these. I have this website, and I need two lines of code positioned next to each other. You can see my attempt at the bottom of the code.
http://pastebin.com/mV1DUbg0
I tried to paste it in, but it looked pretty weird so I just put it in pastebin!
Thanks!
It looks like you're missing a closing </div> for <div class="left">. Just close that and your two lines will be positioned next to each other.
I've never had issues with floating divs before but something fishy seems to be going on with a current project I'm working on. For the life of me, I can't get the divs to float next to one another.
Here is the site: http://travel.tailwatersflyfishing.com
UN:admin
PW:admin
You will see two light grey divs labeled "FRESHWATER DESTINATIONS" & "SALTWATER DESTINATIONS", those are the divs I can't get to float next to eachother.
Ive been banging my head on the desk for two hours so I figured something is going on outside of my skillset??
Its because you have this after each menu item
<div class="clear"></div><br>
Remove this and it works fine
Remove : "<div class="clear"></div><br>" after your below "div" ends
<div class="menu-freshwater-destinations-container"></div>
and in the change the "float" property of the class "div.menu-saltwater-destinations-container" in CSS to "right".
All will work fine.
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
I'm making a website for an organization at my school, using basic HTML and CSS. Right now, I've made several other pages for the site and have run into no problems like this one.
Here is the page I am having trouble with, if you want to view it in context:
http://acacians.net/scratch/officers-slim.html
I tried posting the code here, but it didn't completely work. I suggest following the link and viewing the source.
The final "officer" div is for some reason falling outside of my "info" div, which is nested in the "pagecontent" overall div.
Here is a link to the original CSS:
http://acacians.net/scratch/style.css
I'm really not sure what other information to supply, so I'll do my best to watch for any questions and do my best to respond accurately to them.
Thank you,
-Mike
Put <br style="clear: both;"> just before closing .info div.
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.