I have this code: http://jsfiddle.net/mVX93/48/
Is it possible to remove the border from the far left side and far right hand side of the table?
I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.
Can anyone show me if this is possible and how it should be implemented please?
Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.
Try this:
body {
background-color: gray;
overflow: hidden;
}
.grid {
margin-left: -20px;
margin-right: -20px;
}
You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.
DEMO
If you change the border-spacing to border-spacing-left:0px it aligns with Test but reduces the space between the cells. If you also add another Test and float it right it aligns with the right side of the table.
Related
I am creating apps within this interface which includes divs that can be resized. I have this one (customers) set to open at the size of the contents via setting a default height and width. The tables on the right pull lots of information from a query. It is somewhat annoying to scroll side to side in the little menu. The left side is fine and the text inputs can stay the same. What I want is for the left side to stay the same (always) and for the left side of the right side to always be flush.
Basically, I want the right div elements (within the container div, marked by red in image below) to expand right to fill the box dynamically. I've tried and found some janky methods which make getting everything to stay proper a little funky.
So, community, what is the best way to keep the left side of this div lined up with the fixed left half, while making the right side adjustable to fill only to the right?
Here is a link to the image
I figured it out. The trick was to set 2 larger divs to display:table-cell and set the left one to a fixed width. The right one stays aligned and fills the container. Then you can make divs inside the table cell divs that stay properly sized.
#thisland {
display: table;
width: 100%;
height:100%;
min-height:800px;
min-width: 800px;
position: absolute;
}
#westsyde, #eastsyde {
display: table-cell;
}
#westsyde {
border:1px solid black;
width: 350px;
position: relative;
height:100%;
}
#eastsyde {
border:1px solid white;
position: relative;
height:100%;
}
HTML would be like this, so #eastsyde fills to the right side of #thisland
<div id="thisland>
<div id="westsyde"></div>
<div id="eastsyde"></div>
</div>
So I'm working on a page for a friend ( http://jojorules.com/index.php/our-pillows/ ) and I have 4 rows, with 3 columns each. Each column needs to have 80px of space between eachother, HOWEVER, the first and last column of each row needs to align with the logo/navbar links (indicated by the red lines on the image at the bottom).
Where I want the 80px spacing is indicated by the blue line/text in the image at the bottom as well.
These padding will only be on desktop, which I will add later, but I've been having issues coming up with a clean way that works well, and sticks with those red line alignments.
for the space between the columns remove left padding of first column and right padding of last column to align the content with navbar.
and to make the 80px work use this snippet (Assuming you are using col-md-4):
.col-md-4:first-child { padding-left: 0; padding-right: 40px; }
.col-md-4:last-child { padding-right: 0; padding-left: 40px; }
.col-md-4:nth-child(2) { padding-right: 40px; padding-left: 40px; }
Note: To make the text on right column to be exactly aligned with navbar, You must use text-align: justify in order to force the text for alignment.
So, I have this layout looks like this
As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?
DIV CSS:
.thread-list{
width: 40%;
background-color: #fff;
padding: 10px;
border-style:solid;
border-width:1px;
border-color:#F0F0F0;
margin-bottom: 3px;
margin-right: 10px;
margin-bottom: 10px;
overflow: auto;
float: left;
}
NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.
Sorry, if I'm being not clear enough.
DEMO
If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).
Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.
Add this css in your style-sheet:
.thread-list:nth-child(2n+1){
clear:left;
}
Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.
I have a couple of questions. Please see http://jsfiddle.net/POZR2/
Firstly if you scroll to the right you will see a white space, if you change the size of the screen/result box the size of the white space gets larger/smaller. The css for this is under the 'full' div and is:
#full{ background-color:#262626}
Secondly even though div id noint_box1 is centered in css it appears to be aligned left. This div is basically the 'body' of the html from the first heading to the last picture.
Thnkas
Give #full a min-width of 1061px - this for the first of the two issues.
For the other one... well, I'm not quite sure it's this that you want, but try applying the following rules to #noint_box1:
width: 958px;
margin: 18px auto;
your table is inheriting your centering, but not using it. add margins to it if you want it centered
table { margin: auto; }
I'm playing around with display properties trying to get the hang of them.
One question I had was how to get spacing between the table cells. Right now I have 4 images that are boxed up against each other. I want to have them tight to the left side but spacing in between. So even spacing everywhere except the left. I tried to use border-spacing: 5px; but that added spacing on the left.
I put a version in jsfiddle but its rendering with another issue. In jsfiddle its showing space between the rows. Not sure why that's happening as its working correctly in the browser.
http://jsfiddle.net/chapster11/RjGaX/
You need to add padding:5px 5px 5px 0; to #displayWrapper #grid .gridImage to get the even padding.
This rule says add 5px of padding to the top, right, and bottom and 0 padding to the left.
Add img {vertical-align:bottom;} to fix the extra space at the bottom.
http://jsfiddle.net/jasongennaro/RjGaX/3/
You need to set border-collapse:separate; so that your border-spacing is actually between the borders of the two cells.
add display: block; to the img