I've been trying to separate these two elements using a CSS sheet. I want the img on the top left of the page and the words on the top right. I tried using the ids for each element but since they are all under the first id, and I am not allowed to change the HTML code, the img and the words both move to the right or both move to the left.
#picture {
margin: 0 auto;
}
#header {
background-color: blue;
text-align: right;
}
<div id="header">
<div>
<img id="picture" src="./img/bag.png" alt="notif">
<h1>HELLO</h1>
</div>
<div>I am saying hello</div>
</div>
Use the float property;
#picture {
float: left;
}
#header {
background-color: blue;
text-align: right;
}
<div id="header">
<div>
<img id="picture" src="./img/bag.png" alt="notif">
<h1>HELLO</h1>
</div>
<div>I am saying hello</div>
</div>
Related
Description of Problem:
I'm attempting to arrange the kittens in a star-like pattern with 3 DIV "rows." I would like for the first top row's kitten to be centered on the page (easy enough); the second (or '#middle') row to have their cats left-aligned and right-aligned, respectively; and the third ('#bottom') row to have its cats aligned similar to the second row, but slightly indented on both sides. Again, like a star.
I know the float property essentially makes the element(s) absolutely positioned, which collapses the bottom two rows' height, so that's probably not the right answer. But I've also tried text-align and futzing with margins. My brain is fried. What am I doing wrong?
Fiddle:
http://jsfiddle.net/k97CG/1/
HTML Structure:
<div id="top">
<div id="container1" class="containers">
<div id="cat1">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="middle">
<div id="container2" class="containers">
<div id="cat2">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container3" class="containers">
<div id="cat3">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
<div id="bottom">
<div id="container4" class="containers">
<div id="cat4">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
<div id="container5" class="containers">
<div id="cat5">
<img src="http://placekitten.com/g/125/125" />
</div>
</div>
</div>
CSS Structure:
.containers {
position: relative;
width: 125px;
height: 125px;
}
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
}
#container1 {
margin: 0 auto;
}
#container2 {
float: left;
}
#container3 {
float: right;
}
#container4 {
float: left;
}
#container5 {
float: right;
}
Is there a reason you can't just place them all in one div, then position them with CSS?
<div>
<img id="img01" src="img1">
<img id="img02" src="img1">
<img id="img03" src="img1">
<img id="img04" src="img1">
<img id="img05" src="img1">
</div>
then
div {
position:relative;
width:100%;
height:100%;
}
div img {
position:absolute;
}
#img01 {
top:x;
left:y;
} etc
As a rule, you shouldn't rely on HTML for visually styling content unless you have no other option. That's what CSS is for.
Is this the one you are looking for:
#top, #middle, #bottom {
position: relative;
width: 100%;
border: 1px solid red;
clear:both;
}
DEMO
I am trying to align a small image (logo) next to a heading on my page, and I want these two items to be centered (ideally, the heading would be centered, and the image would be to next to the heading). However, no matter what I try, I can't seem to make it work. Here's a sample:
<h2>Headline</h2>
<img src="logo.jpg">
Now, I have tried a couple of things here. I have tried giving the h2 a div with an id, and the image a div with another id - then giving them set widths and floating them. This at least puts them on the same line, but not in a way I want to.
I also tried to wrap those divs inside another div, like so:
#container {
width: 800px;
margin: 0 auto;
}
#h2div {
width: 40%;
float: left;
}
#imgdiv {
width: 10%;
float: left;
}
That only seems to divide the page so that the header gets 40% starting from the left, and the image gets 10% after that. I tried experimenting with z-index: -1 on the image, and if I then use text-align: center, I can center the headling. But then I have to give the picture a position:absolute or relative, which doesn't work well if the user zooms in or out..
How do I solve this? How do I get either the headline centered, and the image to display right next to it (sort of anchored to the "end" of the headline), or have the two share the center?
how about something like this:
<div id="container">
<h2>Headline</h2>
<img src="logo.jpg">
</div>
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
#container h2, #container img {
display: inline;
}
and jsfiddle - http://jsfiddle.net/Ygz4t/
img is inline element, so you should assign text-align:center; to the parent block element. Assuming you have such markup:
<div id="imgdiv">
<img src="logo.jpg">
</div>
your CSS could be like following:
#imgdiv {
text-align: center;
}
1) Wrap the h2 and img within a div (lets call it as container) and make display: inline-block to show h2 and img in same line
2) Then using text-align: center
HTML:
<div id="container">
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>
CSS:
body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
text-align: center;
width: inherit;
}
h2, img {
display: inline-block;
}
JSFiddle
HTML:
<div>
<h2>Headline</h2>
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>
CSS:
h2, img {
display:inline;
}
h2 {
margin: 0;
line-height: 100%;
}
img {
vertical-align: middle;
}
DEMO
I think you are trying this,
HTML
<div class="out">
<div class="inline">
<h2>TEST</h2>
</div>
<div class="inline">
<img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
</div>
</div>
CSS
.out {
width: 800px;
margin: 0 auto;
}
.inline {
display:inline-block;
}
Updated JSFIDDLE
try this
<div id="center">
<h2>Headline</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>
Demo Fidle
I'm having some trouble finding the way to create 3 DIVs side by side, where the middle DIV has a static size (let's say 900px), and the ones on the left and right side have auto-adjustable widths.
I need to do this in order to put backgrounds on the side DIVs, because the middle div already has a transparent background, so I cannot create a wrapper DIV for the middle one holding the other background. As you might imagine, you'll be able to see through the middle DIV's background.
Any ideas? :)
Is this you want?
HTML:
<div class="wrapper">
<div class="side" style="float:right;width:50px;">side</div>
<div class="side" style="float:left;width:50px;">side</div>
<div class="middle" style="margin:0 50px;">content middle</div>
<div style="clear:both; height: 40px;"></div>
<div id="container">
<div class="left">side</div>
<div class="center">center</div>
<div class="right">side</div>
</div>
</div>
CSS:
.wrapper {
max-width: 1000px;
}
.side, .middle {
text-align: center;
}
.side {
background: red;
}
.middle {
background: blue;
color: white;
}
#container {
display: table;
width: 100%;
}
.left, .center, .right {
display: table-cell;
text-align: center;
background: red;
}
.center {
width: 500px;
background: blue;
color: white;
}
jsfiddle
I am guessing you need a website with 3 columns where the left one is the menu, the middle has the content and the right one has room for advertisement or additional information.
I would go for something like:
<div class="side" style="width:10%; float:left;">content</div>
<div class="middle" style="width:900px; float:left;">content middle</div>
<div class="side" style="width:10%; float:left; clear:both; ">content</div>
Depending on size and placement use the side classes for the sidebars and the middle class for your main content.
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>
I have 2 divs on my page that I want to appear with one centred relative to the page (the page title) and the other floated to the right (a navigation bar). I can't get the title centred relative to the page. The best I can do is have it centred relative to the space remaining to the left of the navigation bar.
This demonstrates the problem I'm having.
<style>
.page {
width: 400px;
margin: 0 auto;
background: red;
}
.navbar {
float: right;
}
.title {
text-align: center;
}
</style>
<div class='page'>
<div class='navbar'>
navbar
</div>
<div class='title'>
<h1>TITLE GOES HERE</h1>
</div>
</div>
Is there a simple solution to this?
How is this?
<style>
.page {
width: 400px;
margin: 0 auto;
background: red;
position:relative;
}
.navbar {
position:absolute;
right:2px;
}
.title {
text-align: center;
}
</style>
<div class='page'>
<div class='navbar'>
navbar
</div>
<div class='title'>
<h1>TITLE GOES HERE</h1>
</div>
</div>