I am using float and then clearing both. but still i have getting some error in the layout. can some one point out what the problem is ?
http://uniquedl.com/3closets/about.html
i want Sneak-peek control div and sneak peek products div to be next to each other. i am using this code to make it next to each other
.grid {
display:inline;
float:left;
}
But sneek-control is taking a lot of margin to the left and not sitting below the above div block
i want the layout to look like this
If you set a height on your .intro-image to 384px same size as image it should work.
.introduction .intro-image {
width: 288px;
height: 384px;
}
.sneak-peek {
clear: both;
float: left;
height: 288px;
text-align: left;
}
should do it.
You also have some problems there... check IE 7 after you finish. Probably they'll clear out by themselves.
Related
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
I'm trying to create a grid with columns. The problem is that once a column is bigger than the other, the next column won't float to the left anymore. Is there anyway I can fix this?
The code for the column is simple:
.column { width: 320px; float: left; }
I want to avoid defining a height or use a float: right.
Thank you
Adding clear fix by using nth-child could be a solution.
.column:nth-child(3n+1) {
clear: both; /* on row 4,7,10,13,16... */
}
Demo: http://jsfiddle.net/0nxb6xnL/
It seems it is happening for different height. Can you make the height identical and try again?
Like
.column { width: 320px; height: 200px; float: left; }
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected