I'm modifying a website and have ran into some issues with my nav bar and main content appearing directly above one another.
You can see it here: http://kennedys.williamoconnor.me/
Does anybody know what in my CSS I can change to have the content appear beside one another? I believe it is float left on the id #left and float right on the id #content
I have two ID's within my #wrapper and I can't seem to get them to appear correctly.
Thanks!
Remove the margins from #contentwrap
There are two solutions:
1) Remove margin-top, and reduce margin-left to 20px
#contentwrap {
margin: 0 0 0 20px;
}
2) Remove all margins and make #contentwrap float: right (example http://i.imgur.com/VpLORSj.png )
#contentwrap {
margin: 0;
float: right;
}
The first option is better in many cases, especially if you wanna change width or margins betweens div's.
Related
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me
Using
.topcontent{
display: inline-block;
}
should solve your problem.
You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
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'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom
I'm trying to float a div (next > previous < links) (#nextprev) to the right of an already right-floated div (#rightcontent). At the moment the #nextprev div is pushing the #rightcontent div into the centre of the page - see here...
http://alexch.net/kblondel/project-01a.html
... but ideally I'd like to keep the #rightcontent div positioned as it was previously...
http://alexch.net/kblondel/project-01.html
There's a right margin on #rightcontent which I guess is making this div get pushed to the left. I really want the #nextprev to ignore this margin in this instance and sit next to #rightcontent.
Can anyone help me with this?
Many thanks
As #helion3 mentions in the comment above, removing the right margin on #contentright is the right idea. To match the old one margin-right: 30px will get the job done.
That is because of the extra div that is added:
<div id="nextprev">next ><br>< prev</div>
Update CSS of #contentright and take out margin-right
#contentright {
float: right;
overflow: hidden;
padding: 40px 0 0;
width: 420px;
}
in this page, on the top, I had the two bullet lists called "Artykuły o mnie w mediach" and "Moje publikacje" in the same space.
"Artykuły o mnie w mediach" was showing on the left.
"Moje publikacje" was showing on the right.
I added a new link to the left URL, I then increased of 20px the sizes of .mediaomnielistright ul and .mediaomnielistleft and then it got disrupted. Now instead than showing one list next to the other, they are showing one on the top and on on the bottom.
I have tried to revert all the changes I made, but for some reason it's still showing wrong.
This is the css in use right now:
#col2{width:580px; height: auto;}
.mediaomnielistright ul{margin-left:5px; list-style-type: circle; padding-left:20px;}
.mediaomnielistleft ul{list-style-type: circle; padding-left:20px;}
.mediaomnielist {overflow:auto; height:580px;}
.mediaomnielistleft {width:310px; float:left; height:inherit;}
.mediaomnielistright {width:288px; border-left-width:2px; border-style:dashed; border-color:#999; overflow: auto; height:inherit;
}
Anybody knows what's wrong?
580px is less than 310px + 288px, so you just have no room for these columns.
You increased the width of the left one? Meaning that there was not enough room left in the parent <div> for them to be displayed side by side. Instead of using absolute values, use percentages:
mediaomnielistleft, mediaomnielistright { width:49%; }
It doesn't add up to 100% because you have a scrollbar on the right hand side of the parent div. This takes up about 16px.
Alternatively you could stick to using actual widths and change
mediaomnielistright { width: 251px; }
.mediaonilist { width :580 px}
.mediomnielistleft { width : 310 px}
.mediomnielistleft { width : 290 px}
310+290=600
So the float is ignored. And i don't count the margin and the padding.