Two divs not aligning - css

I am not able to align my div named #time horizontally with another div named .content.
Click here for a live version of the website - https://dl.dropbox.com/u/73176512/InteractiveGuide/index.html
The time div is not aligning with the content div. Code can be viewed by right clicking and viewing source. Or I can paste it here if requested.
I am floating the #time div right.

Change your code with this,
.upper {
border-radius: 20px 20px 20px 20px;
float: left;
min-width: 1048px;
padding: 10px 0;
}
.content {
background-color: #FFF9EC;
border: 1px solid white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 5px gray;
float: left;
margin: 10px 0;
min-width: 1024px;
padding: 10px;
}
Thanks...

Please remove padding Left and Right form .content
Thanks
Safder Jaffri

here is the solution enjoy just give your upper class min-width to 1070px
.upper
{
float:left;
padding: 10px;
border-radius: 20px 20px 20px 20px;
min-width: 1070px;
}

Add a negative right margin to #time, this way:
#time {
margin-right: -40px;
}

Give the #time div a margin-right of -22px (I just eyeballed this so check for sure)

Related

I have chat message where div is falling down

I have chat message div which floats left and right but I when the reply is more than one lines then div falls down.
Please check my codepen div falling down
I want this output:
Don't let your bubble float, instead use a left margin.
http://codepen.io/anon/pen/grddmW
edit: I updated the code. The same goes for the right floating bubbles, of course.
.message .bubble {
background: #f0f4f7;
font-size: 16px;
padding: 12px 13px;
border-radius: 5px 5px 5px 0px;
color: #717070;
position: relative;
margin-left: 160px;
}
#chat-messages div.message.right .bubble {
border-radius: 5px 5px 0px 5px;
margin-right: 160px;
max-width: 79%;
text-align: right;
}
In both cases, no floating, but a margin to the left / to the right.

Editing Width of Weebly Landing Page Image

My weebly landing page has a section at the top with half of it as text and the other half as an image. The problem is that there is always a gap to the right of the image and whatever is to its right. For example, if the image is "float: right" there will be a gap between the image and the border (banner?). If I flip flop the image and text and do "float: left" for the image there will be a gap between the image and the text box. I've tried changing the widths of just about everything, as well as the paddings of the image and text.
Attached is an image with the picture on the left. You will see the gap between the image and text. Thanks in advance.
Edit: apparently I can't post images yet.
#bannerleft {
float: right;
width: 466px;
height: 288px;
padding: 0px 15px;
background: url(banner-left.png);
border: 0px #222 solid;
border-right: none;
}
#bannerleft h2 {
color: #fff;
font-size: 28px;
padding: 0px 0px;
line-height: 1;
}
#bannerleft p {
padding: 8px 0px;
line-height: 130%;
}
#bannerleft .wsite-button {
margin: 3px;
}
#banner-right {
float: left;
width: 490px;
height: 268px;
padding: 0px 0px 0px 0px;
}

Display two rows of six columns and have them shrink

I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.

Replacing li bullets with backround image, IE 8 and 7

I am adding an image that acts like a bullet for a li:
.top_right li {
float: left;
width: 7em;
line-height: 100%;
background: url(images/thumbs.png) no-repeat top 4px left;
border-bottom: solid 1px #222;
margin-right: 1em;
padding: 5px 0 5px 1.3em
}
Any ideas why thumbs.png does not show in IE 8 and 7?
Here's a working demo. I had to remove the top 4px left in the bakcground property for the image to show.
You have to either specify top left or Xpx Ypx, can't mix them up :).

Making two DIVs the same height

I would like to have the #textblock div to have at the same hight as #brevillestandard div.
CSS:
#textblock {
width: 260px;
border: 1px solid #999999;
padding: 0 5px;
float: right;
font-size: 95%;
background-color: #FEF4CC;
}
#brevillestandard {
padding: 8px 0 0 5px;
height: 80px;
Width: 61%;
border: 1px solid #999999;
float: left;
margin: 5px 5px 5px 0;
}
The answer is literally in the question.
You're giving #brevillestandard a height of 80px.
Add:
height: 80px;
to any other elements you want to be the same height.
Are they not the same height when you set the height in the CSS for both of them?
Perhaps it's the different padding that is causing the difference in their appearance?
If you make the CSS identical, do the two divs look the same? That might be one place to start. Or apply the same CSS class to both, and see if they look the same then.

Resources