I am trying to give magins to inline elements (image thumbnails for a photo gallery). But it seems margin-top is ignored for my elements.
Markup is
<div id="row1-left">
<div id="gallerypreview">
<img id="#previewImg" alt="preview for image" src="gallery/autumn1.jpg">
</div>
<div id="gallerythumbs">
<div id="gallerythumbsInner">
<div class="gallerythumb">
<img src="gallery/autumn1.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn2.jpg">
</div>
<div class="gallerythumb">
<img src="gallery/autumn3.jpg">
</div>
</div>
</div>
</div>
Style is:
#row1-left{
width: 460px;
height: 310px;
float: right;
margin: 15px 15px 0px;
}
#imggallery{
width:450px;
height:300px;
margin:5px;
}
#gallerypreview{
width:450px;
height:200px;
margin:2px 5px;
border-radius:20px;
background-color:#E7E7E7;
}
div#gallerypreview>img{
margin:1px 25px;
width:400px;
height:198px;
}
div#gallerythumbs{
margin:5px 5px;
width:450px;
height:90px;
background-color:#E7E7E7;
border-radius:5px;
}
#gallerythumbs .gallerythumb{
display:inline;
width:140px;
height:86px;
margin:5px 5px;
}
div.gallerythumb>img{
width:138px;
height:76px;
}
According to some old posts on SO, margin-top is not applied to inline non-replaced elements. My questions is if there is any hack to get this done, for example, for my inline image thumbnails that are to be space from their top parent element?
Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.
.....
Another way is to use display:table; instead of display:inline;
best way is to....
use css styling like this
div{
position:relative;
top:-2px;
}
this brings the div 2 pixels down.
display: inline; Do not respect top and bottom margins ...
Related
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I've just started learning html and css and I'm trying to create a simple static website. My problem is that I'm trying to make a div container(option2) scroll with css overflow:auto.
The thing is that there are inner divs that are misplaced, overlapping, etc. when overflow:auto is in effect. #box2 is a inner div of #option2. #box2text is inner div of #box2 div.
HTML
<div id="option2">
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
<div id="box2">
<img class="pic1" src="img/button top/user1.png"></img>
<div id="box2text">Text for updates, news, events, ect.</div>
</div>
</div>
CSS
#option2 {
height:90%;
width:35%;
margin-left:0;
margin-right:5%;
margin-top:2%;
min-height:90%;
position:apsolute;
float:left;
text-align:center;
overflow:auto;
display:block;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2 {
height:25%;
width:90%;
float:center;
text-align:center;
margin:0 auto;
margin-top:15px;
margin-bottom:5px;
bottom:0px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
img.pic1 {
float:left;
height:80px;
width: 80px;
margin-left:20px;
margin-top:20px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
#box2text {
float:right;
height:80%;
width:65%;
margin-right:1%;
margin-top:20px;
background-color:grey;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid white;
}
The only things I can see that's a problem is that in the css for #option2, you have absolute spelled incorrectly and you are trying to use a float value of center. To center an element horizontally, use
margin-left: auto;
margin-right: auto
Also, an id should only be used once. While it usually doesn't affect how the browser renders the HTML, it is incorrect according to HTML standards. Having multiple elements with the same id can cause confusion in the browser, especially if you want to use JavaScript to manipulate those elements.
See this jsfiddle with absolute corrected: http://jsfiddle.net/qpkJV/1/
I have a problem with CSS and HTML I cannot understand why this is happening
HTML:
<body>
<div id="header">
<div id="header_conteiner">
<div id="logo_container">
<img src="images/logo.png" />
</div>
<input type="text" id="txtSearch" class="text_input" />
</div>
</div>
</body>
CSS:
body{
background:#787777;
font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
font-size:0.81em;
margin: 0px;
padding: 0px;
}
#header{
height:100px;
background:#000000;
width:100%;
margin:0px;
border:0px solid #6F3;
}
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
}
#logo_container{
padding-top:3px;
width:237px;
height:100px;
border:1px solid #03F;
}
#txtSearch{
width:220px;
height:20px; float:right;
}
Here is result:
as you see in image input text is out of header_conteiner can anyone advice me something?
Move the input before the logo container.
Add this to #header_conteiner:
float: left;
clear: both;
So result is this:
#header_conteiner{
width:1000px;
height:100px;
border:1px solid #9F0;
margin:0 auto;
float: left;
clear: both;
}
logo_container is a div, a block element. Meaning it takes up the horizontal space in its container; the next HTML element will be forced below it. As logo_container is set to 100px, the same as header_conteiner, there is no vertical space left for your input box. It is forced below logo_container.
To fix the problem, you could make logo_container an inline element and float it left. Inline elements can sit next to each other, whilst block-line elements need their own horizontal space.
CSS display property: http://www.w3schools.com/cssref/pr_class_display.asp
it looks like logo_container has a padding on top of 3px
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}