So I created an ID named top-section, class named container and 2 other classes logo & log-in. I wanted the background-color of top-section to span over 100% of body width and inside top-section I have 3 divs with classes logo and log-in. logo div needs to float left and log-in div to the right. Both these divs are inside container div whose width is 80%.Here is my HTML
<div id="top-section">
<div class="container">
<div class="logo">
Logo
</div>
<div class="log-in">
Sign In
</div>
</div>
</div>
CSS here
#top-section{
background-color: #f5f5f5;
width: 100%;
display: inline-block;
margin: 0 auto;
overflow: auto;
}
.container{
width: 80%;
}
#top-section .logo{
float: left;
}
#top-section .log-in{
float: right;
}
What I want to achieve is the text Logo and Sign In should've a background-color of top-section but at the same time they should not be placed at the extreme end points of body width i.e. inherit a width of 80% from class container so they leave some space from extreme end of body. The class log-in is working fine and leaving some space from right but there is some problem with class logo and it is not leaving any space from left. Is it due to float? How do I fix it? Here is my fiddle http://jsfiddle.net/adityasingh773/76wmomh1/
You simply need to center align your .container class inside of the top-section, so that it isn't left aligned.
.container{
width: 80%;
margin: 0 auto; /*Add this*/
}
Updated fiddle here
just add margin-left and margin-right to your logo and sign-in respectively.
Try this fiddle
UPDATE:
Another way is to add margin: 0 auto to your .container
Add margin: 0 auto; to .container. It's 80% the width of .top-section, but still sitting on the left. This will center it and get your other elements where you want them.
Related
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I am sorry if this is a bit of a n00b question but for the life of me I cannot get this lightbox gallery lined up centrally inside my "content" div.
http://www.justthisdesign.co.uk/bathroom-gallery.html
I am ashamed to be asking such a stupid question but honestly I have tried everything. I have given the last image in each row a class of .last, then played around with padding-right and margin-right but it seems to have no effect.
Use <div id="content" class="clearfix thumbs" style="text-align: center;">
Use Margin 4 For all of your Pics in the gallery on the both sides than just Right side!!.You can Remove horizontal padding of content div and adjust the padding area in the width of the div.
text-align: center; on content div.
give your content div a text-align:center; and give your last images in each row a margin-right of 0 otherwise you will have the extra space on the right side.
#content {
padding: 15px 30px;
background-color: #F8F8F8;
}
Instead of padding try use margin:
#content {
margin: auto;
width: 900px;
background-color: #F8F8F8;
}
And mess around with the width to control its position.
hope this helps.