div alignment

Destramic · August 19, 2014

hey guys im having a problem aligning a div so its vertically aligned middle...the objects im having the difficulty with is "search-bar" and "quick-links" which are apart of the "search_bar_container"...i;ve been fiddling about with it but have had no luck...css isn't really my thing so any pointer will be greatly appreciated

thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script>
$(document).ready(function() 
{
	$("#list-icon").click(function() 
	{
		if ($('#top-bar-media-menu').is(":visible"))
		{
			$('#top-bar-media-menu').hide("fast");
		}
		else
		{
			$('#top-bar-media-menu').show("fast");
			$('#top-bar-media-menu').focus();
		}
	});
});
</script>
<style>
body
{
	margin: 0px;
}

div#top-bar-media-menu
{
	display: none;
}


div#header #left-link
{
	display: inline-block; 
	vertical-align: middle;	
	padding: 5px;
}

div#header #right-link
{
	float: right;
	line-height: 45px;
	padding-right: 10px;
}

div#header #list-icon
{
	background-image: url('list.png'); 
	vertical-align: middle;
	display: inline-block;
	height: 48px; 
	width: 48px;
}

div#header #home-icon
{
	background-image: url('home.png'); 
	background-color: #505050;
	vertical-align: middle;
	display: inline-block;
	height: 48px; 
	width: 48px;
}

div#header #arrow-down
{
	background-image: url('arrow_down.png'); 
	vertical-align: middle;
	display: inline-block;
	height: 16px; 
	width: 16px;
}

div#header #top-bar-container
{
	background-color: #000000;
	width: 100%;
	border-radius: 3px;
	position:relative
}

div#header #top-bar-desktop
{
	background: -moz-linear-gradient(top, #505050, #343434);
	border: 1px solid #080808;
	width: 85%;
	height: 48px;
	margin-left: auto;
    margin-right: auto;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	vertical-align: middle;
	
}

div#header #top-bar-media
{
    display: none;
}

div#search_bar_container
{
	width: 85%;
	height:80px;
	margin-left: auto;
    margin-right: auto;
	position:relative;
}

div#search_bar_container #logo
{
	display: inline-block;
    background-image: url('logo.png'); 
	height: 80px; 
	width: 220px;
}

div#search_bar_container #search-bar
{
	line-height: 45px;
	display: inline-block;
	position:absolute;
	width: 50%;
	height: 40px;
}

input#search
{
	
	position: relative;
	width: 40%;
	border: 1px solid #080808;
	height: 30px;
	border-radius: 20px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 14px;
	color: #000000;
	vertical-align: middle;
}

div#search_bar_container #quick-links
{
	display: inline-block;
	vertical-align: middle;

}

@media all and (max-width:500px)
{
	div#header #top-bar-desktop
	{
		display: none;
	}
	
	div#header #top-bar-media
	{
		display: block;
		background: -moz-linear-gradient(top, #505050, #343434);
		border: 1px solid #080808;
		width: 85%;
		height: 45px;
		margin-left: auto;
	    margin-right: auto;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		font-family: Verdana,Arial,sans-serif;
		font-size: 11px;
		color: #FFFFFF;
	}
}

</style>
</head>
<body>
<div id='header'>
	<div id='top-bar-container'>
		<div id='top-bar-media'>
			<div id="list-icon"></div>
		</div>
		<div id='top-bar-desktop'>
			<div id='home-icon'></div>
			<span id='left-link'>Register / Login</span>
			<span id='left-link'>News</span>
			<span id='left-link'>My Account</span>
			<div id='arrow-down'></div>
			<span id='right-link'>Language</span>
		</div>
	</div>
	<div id='search_bar_container'>
		<div id='logo'></div>
		<div id='search-bar'><input id='search' type='text'/></div>
		<div id='quick-links'>quick links here<div>
	</div>
</div>

<div id='top-bar-media-menu'>menu here</div>
</body>
</html>

CroNiX · August 19, 2014

If you use text-align: center on the parent div that should help. You already have display:inline-block on the child elements so that's correct.

One problem is the image also takes up space (it's also a child of the container), and your search bar is using 50% width, so those will affect the outcome.

CroNiX · August 19, 2014

The 50% width of the search bar is taking 50% of the parent container, which will force some other child objects onto the next "line" unless the others can all fit within the remaining 50%. If you want to use %'s for the children, then they all need to total to 100% or just below that, which is hard to do when you mix %'s and px's.

Digitizer · August 24, 2014

Try to change your code as this and see if this is what you wanted

div#search_bar_container
{
	width: 85%;
	height:80px;
	margin-left: auto;
        margin-right: auto;
	position:relative;
	float: left;
	padding: 10px;
	clear: both; /* So The parent div after this div will come into next line */
}

div#search_bar_container #logo
{
	float: left;
        background-image: url('logo.png'); 
	height: 80px; 
	width: 220px;
}

div#search_bar_container #search-bar
{
	float: left;
	width: 50%;
	margin-top: 25px; /* Adjust this height to your need*/
}

input#search
{
	
	position: relative;
	width: 40%;
	border: 1px solid #080808;
	height: 30px;
	border-radius: 20px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 14px;
	color: #000;
	vertical-align: middle;
	padding-left: 10px; /* Added this one so text will actually look inside */
}

div#search_bar_container #quick-links
{
	float: right;
	margin-top: 25px; /* Adjust this height to your need*/
	font: normal 8pt 'Verdana',Arial,sans-serif;
	color: #000;

}

and @Cornix is right, you should use "percentage" for container sizing rather than hard coded PXs. Random users always have difference resolutions on their screens and your page might not look good .. e-g a 1920px widescreen, where it will land your page?

Edited August 24, 2014 by Digitizer

Sign In

div alignment

Recommended Posts

Destramic

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

Digitizer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information