I'm trying to get three paragraphs of text to float to the right of an image. However, the float: right; isn't working. Instead, the text and background-color (that I added for testing) is placed above the image, covering it completely.
What the heck am I missing?
<div style="width: 100%; max-width: 1200px; height: 500px; background-color: purple;">
<img src="url" style="max-width: 406px; width: 30%; height: auto; float: left; background-color: red; position: absolute;">
<div style="float: right; background-color: green; position: absolute; max-width: 790px; width:69%;">
<p> Text..... </p>
<p> More Text</p>
<p>Final Paragraph </p>
</div>
</div>
You are using position:absolute; as well as floats for the same elements. Try using just floats.
DEMO
position: absolute; - setting this in the "green" text does just that, absolute and thus the float is not "inline" with the image
<div style="float: right; background-color: green; max-width: 790px; width:69%;">
Fiddle with the change made: http://jsfiddle.net/mschultheiss/zghbz40p/
Related
i want to create an div that is 100% (of Browser). The following div is in a div that ist not full width container (that container must stand)
I try this:
<div class="container">
<div style="
width: 100%;
padding-left: 1000px;
padding-right: 1000px;
margin: 0 -1000px;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">
TEXT
</div>
</div>
but i have scroller in browser.
how can i fix it that the browser and the smartphone show me only the full lenght of the div in the lenght of the browser?
I don't see why you'd need the div that has to be 100%, be inside another smaller div, but you could always do something like.
.inner-div {
position: absolute; // Or fixed if the parent div has position: relative or absolute.
top: 0;
left: 0;
right: 0;
bottom: 0;
}
What about this?
<div class="container" style="width: 100%; float:left;">
<div style="
width: 100%;
float:left;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">
TEXT
</div>
Try to use viewportwidth/viewportheight (vw/vh)!
.wrapper {
height: 500px;
width:500px;
background:red;
}
.inner {
height: 100vh;
width: 100vw;
background: blue;
}
<div class="wrapper">
<div class="inner"></div>
</div>
Working example on jsfiddle!
I'm having a rough time trying to position things in CSS. I understand padding,margin,height,width which to me seems like it should be enough to organize nested div boxes, but unfortunately it doesn't seem to be that easy for me.
Anyway, in my example below, the profile picture is bigger than the actual div it's contained in.
What am I doing wrong here?
CSS
.mailcontainer{
top: 40px;
width:600px;
height: 100%;
width: auto;
position: relative;
background-color:green;
}
.mail {
margin: 5px auto;
width: 700px;
height: 40px;
z-index: 100px;
overflow: hidden;
background-color: #d3d3d3;
position: relative;
border-radius: 6px;
}
.leftprofileimage img {
float: left;
max-height: 100%;
width: auto;
position: absolute;
border-radius: 90px;
}
.snippet {
float: right;
top: 10px;
width: 55%;
margin-left:26%;
position: absolute;
}
.sendername {
font-size: 1.0em;
width: 26%;
padding: 9px 0;
margin-left: 15%;
position: absolute;
}
HTML
<div class="mailcontainer">
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
<div class="mail">
<div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
<div class="sendername"><a href="/">Jeff
</a></div>
<div class="snippet">
Hello this is a test message</div>
<div class="delete"><p>DELETE</p></div>
</div>
http://codepen.io/pen/
Your profile picture is 40x40, and the nearest positioned parent is .mail, which is also 40px. The profile pics immediate parent (.leftprofileimage) was not explicitly positioned, so that's probably where the confusion lays. This codepen simply adds rules to .leftprofileimage to make it the element that profile pic conforms to:
http://codepen.io/sean9999/pen/xypBb
I would like to know how i could use css to have a line go through the center of a logo image. See link below:
Example
Thanks
Julian
Here's one approach using absolute positioning
<div>
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
<img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
<div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>
example
This should work
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
I set the relative position of each div to -20px because 20 is half of the height of the logo image. So if your logo image SRC is 80 pixels tall than set both divs to top:-40px;
Working Example: http://jsfiddle.net/Edd6j/2/
Here's one approach, it uses an absolutely positioned span as the strike through, and a div with the span and image in it to position the strike through, here's a working example
and here's the code.
<div class="logo-container">
<span class="logo-line"></span>
<img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
<span class="logo-line"></span>
</div>
css:
.logo-container {
position: relative;
height: 87px;
width: 35%;
margin: 0 auto;
min-width: 144px;
}
.logo {
position: relative;
width: 72px;
height: 87px;
z-index: 2;
}
.logo-line {
position: relative;
display: inline-block;
top: -50%;
width: 20%;
height: 2px;
background: #333;
}
I want a few divs to be positioned in a line next to each other, but also allow them to overlap the previous div.
What I'm trying to get is a timeline with divs for events of certain length. The events can overlap each other.
My idea was to give each div the same top position, an increasing z-index and an increasing left position (according to the time of the event). Later I would pop individual divs out by mouse-over events to visualise the overlap.
What I do is to make it so each div gets placed under the next one. With fiddling of the top attribute I can get them to align horizontally, but I don't see the pattern.
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
If I use absolute positions, the elements fly out of the surrounding div and are positioned absolutely at some place in the page.
It's simple. Make an inner div using absolute positioning but wrapped with a div that uses relative positioning:
<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
<div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
<div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>
You can use another method like negative margin, but it's not recommended if you want to dynamically change HTML. For example, if you want to move the position of the inner div(s), just set the top/left/right/bottom CSS properties of the container or modify the properties using JavaScript (jQuery or otherwise).
It will keep your code clean and readable.
Use Negative Margins!
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>
Fiddle: http://jsfiddle.net/vZv5k/
Another Solution:
Give the .day class a width, height, and position it relatively, keeping the inner divs absolutely positioned.
Check out the below CSS:
.day {position: relative; width: 500px; height: 500px;}
And the HTML:
<div class="day">
<div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
<div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
<div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>
I found the solution. It's probably blindingly obvious to anyone who knows css.
I thought I could not use absolute positioning because my elements would fly out of the surrounding div.
Turns out, I misunderstood absolute positioning. It's not the same as fixed, but to me it looked like that.
https://developer.mozilla.org/en-US/docs/CSS/position explains it well.
Absolute positioning positions absolutely to the next surrounding anchor. That defaults to the whole page, if no other anchor is defined.
To make something a anchor it needs to be position: relative;
Quick solution
add position: relative; to the day class and using absolute positioning in the inner div.
With the top attribute, you can also move relatively positioned objects. In my code sample the red box overlaps the green box due to it's z-index. If you remove the z-index, then the green box is on top.
HTML:
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
</div>
CSS:
.wrapper {
width: 50px;
height: 50px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: relative;
}
.box.one {
background-color: red;
z-index: 2;
top: 0px;
}
.box.two {
background-color: green;
z-index: 1;
top: -50px;
}
I'm having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.
See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image)
The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.
my code looks something like...
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
CSS:
div#wrapper {
margin: 0 auto;
width: 1020px;
position: relative;
}
div#header {
height: 150px;
position: absolute;
left: 510px;
width: 100%;
}
div#left {
width: 510px;
float: left;
}
div#right {
width: 100%;
float: left;
}
I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! :)
Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.
Note I made the widths smaller so it would fit in my jsfiddle window.
HTML:
<body>
<div id="wrapper">
<div id="leftContainer">
<div id="left">
This is left
</div>
</div>
<div id="rightContainer">
<div id="header">
This is a header
</div>
<div id="right">
This is right
</div>
</div>
</div>
</body>
CSS:
div#wrapper {
text-align: center;
width: 100%;
position: relative;
white-space: nowrap;
overflow-x: scroll;
}
div#header {
z-index: 1000;
height: 150px;
position: absolute;
left: 0;
width: 100%;
background: green;
}
div#leftContainer {
float: left;
width: 50%;
height: 500px;
display: inline-block;
}
div#left {
float: right;
width: 260px;
height: 300px;
background-color: purple;
}
div#rightContainer {
position: relative;
float: right;
width: 50%;
height: 500px;
display: inline-block;
}
div#right {
width: 260px;
height: 300px;
background-color: yellow;
}
Try this one. I changed the wrapper width to 80%. Not sure if that's ok. But I works well when expanding the page. Moved the header outside of wrapper and also added background color for clarity.
Note 1: right DIV's margin-top is same size as header DIV's height.
HTML
<div id="outerWrapper">
<div id="header">
Header
</div>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>
</div>
CSS
div#wrapper {
margin: 0 auto;
width: 80%;
height: 100%;
position: relative;
background-color: #CCCCCC;
}
div#header {
height: 150px;
float: right;
position: absolute;
left: 50%;
width: 50%;
background-color: yellow;
}
div#left {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
div#right {
width: 50%;
height: 100%;
float: left;
margin-top: 150px;
background-color: blue;
}
Hope this helps.