I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)
Related
I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.
I've been working a lot with responsive webdesign lately, and I've come across a bit of an issue. I have a one-page based website, where I currently have 2 sections (pages) first one is the intro, and second one is "about me". Now, I had a couple of my friends to visit my website on their computers (1 being a laptop, which screen height is very low compared to my 24 BenQ) I want to ask how I can make my content static, so the intro doesn't sort of disappear underneith the "about me" section.
.intro-container
{
width: 70%;
letter-spacing: .2em;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#ContentWrap-2-about
{
width: 100%;
height: 50%;
background-color: rgb(255, 255, 255);
}
these are the wrappers that sort of interacts the wrong way. You can visit www.old.vhammershoi.dk and scale down your browser to see that the box with the arrow in it (click and explore popdown) will move underneith the about me section
Thank you in advance
First off all, there is no need for custom height. You have set height to element with overflow: hidden, and because content is longer than element, button is pushed down. Remove height from all main elements, also, remove margin from intro container. In that way, button will be visible, and rendered page will be the same as without changes (except visible button)
Try one of these to fix your DIV (intro container) to the top of the screen.
position:fixed;
position:static;
position:absolute;
Here is a working example : http://jsfiddle.net/19Lhchyy/1/
Using postition:fixed;
http://www.w3schools.com/cssref/pr_class_position.asp
#ContentWrap {
min-height: 100%:
padding-bottom:30px;
}
#clickAndExploreText{
position: absolute;
}
I dont know if ure able to position it but if you dont, your container will grow on hover
Then your Text 'Click and Explore' will never be under the following container.
aditionally you are missing some white-space:nowrap in your mobile version to prevent linebreak for the headlines and the tet 'click and Explore'
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
I've searched google and SO for a solution to this problem but have not found it, perhaps this is due to my uncertainty as to how to word it best.
Here is the issue:
I have a 3 column page using divs. The divs are as follow, left, middle and right container divs, with various content inside. What I need them to do is align horizontally from the top. What they are currently doing is some jigsaw jagged aligning. I believe this is because of the content inside (as I've altered everything else without result), which varies from titles with padding around it, to text, fb like buttons, etc. As you can see here, http://sunnahspace.com the temporary double line on the page is what I am trying to align them against. I can post all the code you need but as it is a lot I would prefer not to bog everyone down with a lot of reading, I will post the css and if you ask for something specific I will post it, otherwise it can be viewed from the source for the index page linked above. And please go easy on me, I'm a bit of an idiot when it comes to developing, and I'm sure you've all been noobs before. Thanks in advance.
Here is the css for the 3 divs:
#middle_container {
float: right;
width: 60%;
padding: 5px;
margin:auto;
}
#right_container {
float: right;
width: 20%;
padding: 5px;
margin: auto;
}
#left_container {
float: right;
width: auto;
min-width: 200px;
padding: 5px;
margin: auto;
}
FIrst of all you need to take off the first spacer above the first column_middle_temp1.
Second you need to remove margin-bottom: 20px from the top_container.
Lastly you need to add a at the bottom of:
<div id="left_container">...</div><br clear="all" />
This is what I saw right away, if this still doesn't work let me know.
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer