I would like to center a text element (in this case, the h2 sub-headline) by having it ignore the floated image to the left. My preference would be for the h2 sub-headline to vertical center-align with the h1 headline. Is there any way to do this with CSS alone?
Here is a sample layout:
http://tinyurl.com/84otx8y
Note: the width and height of the sample image may change.
You want to ignore the floating element? That's possible, however, I would not recommend this, as this will create an ugly result if your h2 headline is to wide:
.wrapper{
position:relative;
}
.wrapper h2{
position:absolute;
left:0;
right:0;
margin-top:1.5em
z-index:2;
}
.wrapper h2 + p{
margin-top:2.5em;
}
Note that this solution will have the h2 border on top of the image. You can prevent this by using position:relative;z-index:4 on your floating image.
Related
I am trying to prevent two side by side divs I have from overlapping in responsive layout.
Here is my html:
<div class="image"><img src="images/misc/libertyXSmall.jpg"/></div>
<div class="storyWrapper">
<div class="headline">THIS IS A TEST HEADLINE TO SEE HOW EVERYTHING
WORKS ON THIS NEWS LIST PAGE!</div>
</div>
Here is the CSS:
body{margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;}
.mainContainer{float:left; height:auto; width:100%; max-width:800px; }
.image{float:left; margin-top:0px; width:14.25%; height:auto;}
.storyWrapper{float:left; width:85.75%; height:auto; min-height:64px; background-color:#f6f6f6; color:#000000;transition:0.2s; }
.storyWrapper:hover{background-color:#c0c0c0; color:#ffffff;}
.headline{text-align:left; padding:6px 6px 6px 6px; font-size:11pt; font-weight:bold; font-family:Arial; text-decoration:none;}
The link to this page is: http://www.rebelplanetnews.com/newsMenu3.html
As you can see, my issue is.. the text div to the right overlaps the image div to the left on page resize (smaller). I need to prevent that.
The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.
The following will work:
div.storyWrapper {
width: calc(100% - 114px);
float: right;
}
Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.
I have also floated the container to the right.
Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.
The problem is that your actual image isn't shrinking when the .image div is. So .image div will adjust according to its width percentage, but not the image contained within it. If you add a width: 100% to the img element, the image will now shrink along with the div container, and the text div won't overlap.
I'm having trouble to to style my layout like I want it to. I have a content area #content (the grey you can see in the example image) with a yellow element inside. This div is position:static;height:100%;. Now I have a #left-panel div also, with position:fixed;height:100%;. The problem is, if the content area has not enough space a horizontally scrollbar appears. This will be overlaped of the fixed div. For me it is all logically, but I don't know how to get around this. My scrollbar of the #content-element should be visible the whole width of the window. So it would not be a solution for me to just reduce the width of the content if the panel is in view.
The whole css:
#content{
width:100%;
height:100%;
background:grey;
}
#left-panel{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
overflow-y:auto;
}
Can somebody help me fixing this with pure CSS?
Fiddle: http://jsfiddle.net/a2wn8x5z/1/
Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).
So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:
Scrollbar Fixer
perhaps your problem is in this code here
<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>
remove the width:110%; and it should be good to go.
Here's the Updated Fiddle
Edit
I think I misunderstand what's the problem before.
Because on your case, you use position: fixed; for #wrapper and #left-panel, and both use stlye left: 0, their position will overlap each other in left from the viewport, you basically need to position the left of #wrapper not to be in the same position as #left-panel, so you need to add this to #wrapper
left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;
and remove
width:100%;
here's the Updated Fiddle
to make sure it's what you want, try change the style of the div inside #content to width:200%; and add margin:20px;
Edit Two
the cause for the scrollbar to overlap each other is because in the fiddle you use position: fixed for the #wrapper, thus will not create a scrollbar in the body, then you add overflow:auto in the #wrapper, causing the scrollbar to be created for the #wrapper and not the body, so you need to change the CSS for #wrapper to this
#wrapper{
background:gray;
}
I don't include the height because for the div, the height is based on the child inside it, so you couldn't see the gray background, except you add some padding to it.
here's the Working Fiddle
First of all, you don't have to add "position: static;" style into your div, because it's static by default. There are two ways to solve your problem:
Add "position: relative;" into #content selector and declare #content after #left-panel in your HTML.
<div id="left-panel"></div>
<div id="content"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
}
Codepen: http://codepen.io/anon/pen/yoHxl
Or add "position: relative; z-index: 1" (z-index of #content should be higher of #left-panel's) into #content selector.
<div id="content"></div>
<div id="left-panel"></div>
#content{
position: relative;
width:100%;
height:100%;
background:grey;
z-index: 1;
}
Codepen: http://codepen.io/anon/pen/HgwDx
Best,
Marek
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I have this div with class "circle-text" which contains a "p" element containing a small text.
The p element has top and bottom margins.
Now this margins seems to be moved above the upper div instead of being between the div and the p, which I dont want.
CSS:
.circle-text {
/*float: right;*/ /* Uncomment it*/
width:20%;
border-radius: 50%;
background-color: green;
}
.circle-text p {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin:2em 0;
text-align:center;
}
Here's the example: http://jsfiddle.net/bendtherules/3eebw/6/
Now if I add float: right; to the upper div, it actually includes the margin now (which is exactly what I want).
How does that work? Also how can I mitigate this issue?
DEMO: http://jsbin.com/uBANucu/1/
Another option which may be more flexible: http://codeitdown.com/css-circles/
The p will always affect the height and so the result is an oval, not really a circle. There's a number of ways to do this, here's one:
<div class="circle-container">
<div class="circle-text">
<p>I am circle</p>
</div>
</div>
CSS
.circle-container {width:20%;}
.circle-text {
border-radius: 50%;
background-color: green;
padding-top:50%;
padding-bottom:50%;
position:relative;
}
.circle-text p {
position:absolute;
top:50%;
width:100%;
line-height:0;
margin:0;
padding:0;
text-align:center;
color:#fff;
font-size:15px;
}
If I understand your question right, the reason this is happening is because you have added both padding and margin. Margin goes outside of the padding. If you press Ctrl + Shift + C while in Chrome, hover over the p and select it so that you can inspect element. You will notice that the margin of the p is outside of the padding that is already there.
Once you have the developer tools opened, go to the right panel and scroll down until you get to the section where you can see how many pixels or margin and padding there is. It is an interactive picture that you can't miss.
If setting line-height: 0 is suitable for your design, change that and remove the margin altogether.
Example: http://jsfiddle.net/3eebw/12/
An understanding of the CSS box model may help you. See this diagram: http://www.w3.org/TR/CSS21/box.html
From what I can see what you mean is that you want to increase the space between the top and bottom edges of the circle from the p tag. The padding is the right way to go and not the margin.
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;