Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.
<div id="content">
all the content you see except the Half BOX in the right hand side
<div id="content-meta-wrapper">
<div id="content-meta>
The right that is aligned at the TOP RIGHT of the content diva
<div>
<div>
</div>
The reason I can't just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.
Assuming it's marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.
The code I used in This Example is the following:
#container { /* Pure Looks */
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#floated {
height: 100px;
width: 100px;
float: right; /* This is what counts!! */
background: red;
}
See this Awesome Article about Floats - by Chris Coyer of css-tricks.com
You should use the css rules,
float:left;
float:right;
these will align your divs in the correct postion, to keep things tidy make sure to give your div's a width.
Related
I have created a wrapper div (ctccon) within which I have two divs both floating left so that they are positioned next to each other. This works fine until I add an image or table inside the right div (conright) and then the added element gets pushed below the left div (conleft).
My css
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float:left;
width:40%;
font-size:0.7em;
}
.ctccon .conright {
float:left;
font-size:1em;
}
And my html (without added elements)
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div </div>
</div>
and with added elements
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>
I know it's probably something I haven't understood re floats but I have not found a solution. Any pointers?
-----update-------
I have since removed the image and added a table inside conright. Still getting the same issue as per the image below:
It will be better if you share an image of your error but:
I recreated your code with an image, and with a table, and it doesn't get push to the bottom of the other div.
But let me explain what might be happening to you:
1: You have 2 div that are pushed left, if one of them gets to have an space, it will put itself below your other div, why? because is pushed left!, if it is pushed left and there is nothing next to it. It will take that space and do what is intended to, float left.
2: If you want your div to stay to the right, put in your css code float RIGHT, and it will be in the right ignoring your left div (as long as it doesnot take the whole screen).
3: If your image takes more that the 60% left of the space the other div has available, it will get push to the button to be able to fit the image.
To solve your issue I think you can add this to your code in your conright div:
.ctccon .conright {
float:left;
font-size:1em;
width: 60%;
}
Why do you have to this this?, because if you dont specify the width of this div, and its content takes more space that 60%, it will get push to the bottom
Please if this doesn't answer your question provide a picture of your error.
that depends on the size of the image:
If the image plus the text become wider than the space left by the first div, it will go below the first div.
But you can add a width to the second div to avoid that - any width up to 60% should work.
Addition / snippet:
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float: left;
width: 40%;
font-size: 0.7em;
}
.ctccon .conright {
width: 60%;
float: left;
font-size: 1em;
}
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div>
</div>
After trying to make the floats work, I just ended up using grids instead and modified the CSS code as follows:
.ctccon {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
}
.conleft {
font-size:0.7em;
}
.conright {
font-size:1em;
}
Now I get the layout I intended to get:
The added benefit to doing it this way, I suppose, will be making it easier to make the website responsive. I am using scss and breakpoints so I'd just need to change the css slightly for each breakpoint.
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
What I'm trying to do is have three divs wrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.
<div id="container">
<div class="one"/>
<div class="middle">...</div>
<div class="two"/>
</div>
Not sure if I should be using div or span for this.
Any advice on the CSS?
#thirtydot The two divs at the side of
the middle div will contain nothing,
just a border-top, the middle div will
contain two links. :)
In that case, I'm answering with something simpler that you might be able to use.
See: http://jsfiddle.net/uZ5dn/
<div class="container">
<span class="middle">content con tent the tent of cons content content</span>
</div>
.container {
border-top: 5px solid #f0f;
text-align: center;
}
.middle {
background: #fff;
display: inline-block;
position: relative;
top: -5px; /* same as border-top-width */
}
It's not awesome, but it might be good enough.
At the very least, I'll get a better idea of what to suggest next.
If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.
You can get and set the actual size of the DIVs in pixels using the .height() function.
So, you could do something like:
if ($('#div2').height() > 200) {
$('#div1').height(100);
$('#div3').height(100);
} else {
$('#div1').height(200);
$('#div3').height(200);
}
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.
My problem is best outlined with this schematic/image which outlines how I want it to look:
!
I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.
My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.
I can't figure out how to make those 2 horizontal white stripes resize automatically.
Here's my HTML:
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </div>
<div id="intro-text">{intro_text}</div>
</div>
And here's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're just placeholders:
#masthead {
height: 260px;
}
div#headline-container {
width:960px;
padding:none;
}
div#left-stripe{
float: left;
background-color:#fff;
height: 3px;
width:500px;
display: inline;
}
div#right-stripe{
float: right;
background-color:#fff;
height: 3px;
width:100px;
display: inline;
}
div#headline {
text-align:right;
color: #fff;
font-size: 200%;
float: left;
display: inline;
}
div#intro-text {
text-align: left;
float: right;
width: 300px;
color: #fff;
}
Ideas? Please let me know if I can provide more detail.
I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).
Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.
This CSS solution MIGHT work... no promises.
markup
<div class="container">
<div class="headline-container">
<div class="left-stripe"></div>
<div class="headline">Headline goes here</div>
<div class="right-stripe></div>
</div>
<div class="content"></div>
</div>
CSS
//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }
Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.
(same markup...)
..
js
var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
You can do this dynamically, with jQuery, for example. You take the full width of the 3 div's, drop the size of the inner div and assign dynamically the widths of the 2 outer div's in which the bar should repeat horizontally.
Basically, you will need:
$("#whole-div").width() - $("#inner-div").width() for the outer div's total width. Then, depending on your positioning of the inner-div, you assign values for the outer div's.
For example: whole div has 1000px, inner div has 200px and inner div is positioned 600px left. You will then assign 600px to the left div ($("#whole-div").width() - $("#inner-div").css('left')) and 200px for the right div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). Of course, you will then set a background-repeat property on the outer div so that the image repeats.
Hope that helps!
UPDATE CSS only fluid solution: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/
it uses the same background image twice, on #masthead and on #headline-container. except ton headline container the background is offset to match its left position relative to its parent element. then we only need one div.line behind it, which gets covered by the background image under the headline and copy, giving the illusion of a seamless image.
do you mean like this?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/