hi I have two container divs one of them has a div with an image background and i think this is the div that is causing problem. I tried removing both container divs and the gap was still here. there are no margins no paddings, and i know it is not the image that has this line its not there when i open it in photoshop. I am also using css reset
Where is this space coming from?
css
.container{
width:100%;
}
.container2{
width:100%;
}
.first-image{
width:1430px;
height:497px;
background-image:url('../images/introimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
border:none;
}
.jamey{
width:35%;
}
.second-image{
width:1430px;
height:430px;
background-image:url('../images/secondimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
}
html
<div class="container">
<div class="wrapper">
<div id="overlay"></div>
<div class="first-image">
<div class="jamey">
<p class="def">
JAMEY
</p>
<p class="rip-date">03.02.1997 - 09.18.2011</p>
<p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p>
</div>
</div>
</div>
</div>
<div class="container2">
<div class="intro-div">
<div class="end-hate">
<h1>PUT AN END TO HATE.</h1>
<p>
ANYTHING WRITTEN ONLINE can become viral
</p>
<p>
We believe that the way we behave online should be no different from the way that we behave in
</p>
<button type="button">JOIN CAMPAIGN</button>
</div>
</div>
Your problem can be removed by,
.first-image
{
margin-bottom: -20px; // or desired settings !
}
You may try adding the
box-sizing: border-box;
It helps setting padding/borders (maybe you have one) internal to the element. If it has some effect you can override these settings later.
Anyway, it's recommended that you add a jsFiddle so we can see for ourselves.
Related
I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
I try to build a responsive design for a website but have runned in to a problem.
Visit this page : http://test.ufeed.se/
Change your browser size to under 820px and you will see a responsive design. The problem here is that I get a strange space between the data and the title? I have tried to find why there is a space but without luck?
This is the simple markup of the part :
<div class="rightPostCell">
<div class="titleCon">
<div class="linkIcoCon">
...
</div>
<div class="floatLeft">
...
</div>
</div>
<div class="data dimText">
<div class="commentsCon">
...
</div>
<div style="clear:both;"></div>
<div class="createdDateCon">
...
</div>
<div style="clear:both;"></div>
<div class="baseLinkCon">
...
</div>
</div>
<div style="clear:both;"></div>
</div>
Why is there a space between title and data? And how do I remove it?
Looks like it's a float issue (I find issues tend to crop up every time I use float, generally I prefer display: inline-block because it introduces fewer bizarre bugs like this) - if I disable clear: both on the data, it falls into place correctly.
Changes you need to make to your mobile.css file
.postContainer .titleCon{
overflow:hidden; /* ADD this property */
}
.postContainer .data{
overflow:hidden; /* ADD this property */
clear:both; /* REMOVE this property */
}
line 37 of your PostList.css
add overflow:auto
in mobile.css line 80
change float:none
to clear:both
will need to add some margin after that but it removes the space that occurred.
try this one it will solve your issue
add clear class after left and right cell and add over flow hidden in .postContainer .rightPostCell class
<div class="postContainer">
<div class="leftPostCell">data</div>
<div class="rightPostCell">data</div>
<div style="clear:both;"></div>
</div>
.postContainer .rightPostCell {margin-left: 123px;overflow: hidden;}
There are a lot of solutions. Here is one:
mobile.css line 80
.postContainer {
width: 100%;
padding: 3px;
float: left;
}
PostList.css line 37
.postContainer .rightPostCell {
float: left;
}
Using CSS, is it possible to right-align two DIVs?
I have a title and I want to right-align a more link underneath it. The site is internal and so, unfortunately, IE7 is the primary browser. (We will upgrade to IE8 before the end of the year, and some are using Chrome). I'd like to avoid javascript, but I'm open to it.
The title changes, so absolute widths won't work. It should look something like this:
| Arbitrarily long title text
| more...
I've been all over the Googles looking for a solution, but everything I've found so far relates to right-aliging the content of a DIV, or to right-aligning a DIV to the page, or right-aligning a DIV within an absolutely sized DIV.
I can show you my efforts so far, but as none of them work, I don't think they're of much use.
<html>
<body>
<div style="float:left;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<div style="width:0px; overflow:visible; white-space:nowrap;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text -->
<div style="width:120px;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
</body>
</html>
If anyone knows of a duplicate question, I'd love to learn the secrets of your Google-fu!
EDIT
Image, as requested. The link is bordered with red. (I had to set the margin-left to 70px to achieve this affect.)
<div style="float:left; position: relative">
<div>Arbitrarily long title</div>
<div style="position:absolute; right: 0">more...</div>
</div>
http://jsbin.com/efixij/7/edit
Another way you might solve it (I don't have IE here, so I can't test it now, but I used similar styling on cross browser before).
Snippet
.title-block {
float: left;
position: relative;
padding-bottom: 1em;
}
.more {
position: absolute;
right: 0;
bottom: 0;
}
<div class="title-block">
<div>Arbitrarily long title</div>
<div class="more">more...</div>
</div>
This might not be very useful but give it a look:
Align main Div content to left and then the "more" div to righ as here :
<div style="float: left;">
<div>
Arbitrarily extra extra long title here
</div>
<div style="float:right;">
more...
</div>
</div>
<div>
<div> Business area </div>
<div> Inernal Audit </div>
<div style="text-align: right;"> More... </div>
</div>
<div class="one">
Arbitrarily long title Arbitrarily long title
<div class="two">more...</div>
</div>
.one{
width:auto;
float:left;
border:thin red solid;
margin:5px;
}
.two{
float:right;
}
DEMO
I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}