CSS - how to put divs in the correct position on a webpage [closed]


Tags: html,css

Problem :

I want to put three divs on my webpage, like this, the pink div is the container for two other divs and I want to center the div on the webpage (vertically and horizontally). I prepared some jsfiddle, but obviously I suck at css, so the effect is far from the expected one... So far my css looks like this:

#intro2{
        background-color: #b0e0e6;
        width: 50%;
        margin: 0 auto;
        font-size: 1.5em;
        }
#intro2 .image{
    position: absolute;
    left: 0px;
    background-color: #aaaae6;
}
#intro2 .text{
    position: relative;
    right: 0px;
    background-color: #cccccc;
}
}

Could you help me with that? Thanks.



Solution :

Try like this:-

#intro2{
	background-color: #b0e0e6;
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
	padding: 5px;
}
.clear{
	clear: both;
}
#intro2 .image{
	float:left;
	width:50%;
	background-color: #aaaae6;
}
#intro2 .text{
	float: right;
	width:50%;
	background-color: #cccccc;
}
<div class="intro" id="intro2">
	<div class="image" id="image1">
		<img src="http://www.cdc.gov/animalimportation/images/dog2.jpg" alt="simple" />
	</div>
	<div class="text" id="text1">
		<h1>Simple</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales sit amet mauris in blandit. Aenean sodales in dui eget facilisis. Vestibulum tempor risus dui, sed pharetra nulla auctor id. Sed purus odio, tempus et volutpat a, fermentum sit amet ante. Etiam eros mauris, rutrum at vehicula a, vehicula vitae nulla. Suspendisse non mattis turpis. Donec non convallis lacus. Nullam gravida diam et leo tempor vestibulum. Vivamus lorem nunc, bibendum eu lacinia quis, porta vel nisl. Sed vitae euismod augue. In at est lacinia ipsum feugiat feugiat. Praesent mollis posuere ante, eget maximus est mollis suscipit. Donec ullamcorper elit quis cursus gravida. Quisque leo risus, bibendum sed nisi ut, facilisis iaculis arcu. Pellentesque purus augue, fringilla tempus augue eget, ullamcorper condimentum leo.</p>
	</div>
	<div class="clear"></div>
</div>


    CSS Howto..

    How can a user add content to a website? [closed]

    Hiding and Showing Content using CSS3, Want hidden state the be the default

    How to make IE respect max AND min-width [duplicate]

    How to position the element using absolute position?

    How to make elements stay within container?

    How do you create tabstops in XHTML?

    How to extend css class

    How to add text under every image?

    how to make the osx-like border on css?

    How can I set my image's hover when hovering my text?

    How to display the bottom of an image?

    When using CSS transformation, how to avoid an element to overflow its parent?

    How to property adjust table?

    How to position many DIVs in CSS

    How to highlight a whole cell when hovering over link

    How to local storage expand/collapse CSS settings

    How to add text using css in textarea? [closed]

    How to set a single value of transform while leaving the other values?

    how to position an element right below an “absolute” div?

    How to divide a border into 4 equal parts?

    CSS/Bootstrap: How to stretch containers within cols full-height?

    How to create a custom vaadin component in vaadin 6

    How to edit HTML with CSS? [closed]

    How to write CSS keyframes to indeterminate material design progress bar

    css selector question, how to change font colover of parent li when child ul is focused

    How to display background-image on entire site

    How does content CSS property define the icon in bootstrap

    Manual JavaScript Slideshow with Dynamic images

    How to Pause ALL CSS animations?

    CSS. Parent > Child1:hover. How to display Parent > Child2?