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.
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 am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
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 :)
I know that I can use the settings margin: 0 auto; to position an element at the center of its container
For example I could have something like:
<body>
<div id="container">
<p>SOMETHING</p>
</div>
</body>
and the related CSS that put the div having id "container" at the center of the page (at the center of its container that is the bosy element):
#container {
margin: 0 auto;
width: 770px; /* Imposto la larghezza */
}
Ok,
this is clear for me but I have some doubts related to the previous CSS code:
1) Now I am using a fixed dimension template (I declare explicitally the dimension in px), can I use this policy also for liquid template (where I don't declare the dimension in px, but in %) or have I some problem?
2) What is the exact meaning of margin: 0 auto;? It only means: "position an element at the center of its container" ore it have some more specific meaning?
Tnx
Andrea
My site (profile) uses dynamic (e.g. liquid) layout, at least width wise (it gets a bit excessive for dynamic height).
To answer the first part of your question you certainly can center things in a dynamic/liquid layout and you can use margin: 0 auto;. I typically use the following for centering anything...
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
One of the problems you will encounter with other people's CSS is that I've noticed a lot of people have no idea how to use CSS1 and just spam CSS2 position which will mess everything up even if you've half converted it back to CSS1. Position should be limited to no more than about five or six instances on an entire page unless you're dealing with some really data-heavy layouts and usually this is for SEO to keep the content at the top in the (X)HTML code (again like my site) but visually have the menus at the top.
I've written a CSS1 tutorial that may help if you understand CSS1 which in turn may help you clean out styling issues by others.
To answer the second part of your question when you use margin: 0 auto; (this is called CSS shorthand) you are effectively writing...
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
To make it really clear another example using margin: 20ox 10px; you are effectively writing...
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
If you make a quick HTML file and open it with Firefox/Firebug and look at the left panel HTML tab / right panel "layout" tab it will show you how the measurement of an element is calculated from any given code.
If you have questions please comment and I'll be happy to update my answer as needed.
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.