• 0

CSS Div alignment


Question

What I am trying to achieve is to have 2 bookends and both sides of the screen in the middle will be books On to of the books will be the logo

 

I would link to the code but the web server is offline for upgrades

<style>
.threecol {
width:100%;
overflow:hidden;
}
.threecol div {
float:left;
width:33%;
}
#left
{
	width:9px;
}
	#right
{
	width:9px;
}

#middle
{
	
	background-image: url('middle.jpg');
}
</style>
<div class="threecol">
<div id="left" align="left"  ><img src="left.jpg" width="9" height="90"></div>
<div id="middle" align="center"><img src="logo.jpg" width="9" height="90"></div>
<div id="right" align="right"><img src="right.jpg" width="9" height="90"></div>
</div>

post-178294-0-74098600-1408682969.jpg

post-178294-0-84470700-1408682976.jpg

post-178294-0-59448100-1408682986.jpg

post-178294-0-84068900-1408682993.jpg

Link to comment
https://www.neowin.net/forum/topic/1226625-css-div-alignment/
Share on other sites

3 answers to this question

Recommended Posts

  • 0

  • Don't use the align attribute on div tags.

Float the left and right divs.

Remove the middle div.

Assign the bakcground-image style to the treecol div.

Move the logo image in to the threecol div.

You can make the logo image appear in the center by setting the "text-align: center" style to the treecol div.

  • 0


<!doctype html>

<html>

<head>

<style type="text/css">

body{

margin:0px;

padding:0px;

}

.a { /* http://www.css3.info/preview/multiple-backgrounds/ */

background-image:url('bcl.png'),url('bcr.png'),url('bcm.png

background-position:left,right,center;

background-repeat:no-repeat,no-repeat,repeat-x;

height:100px; /* should be multiples of background height */

min-width:81px; /* so that min-width is at least background width */

overflow:hidden;

}

.a p{ /* dummy text */

margin:25px 35px;

padding:0px;

}

</style>

</head>

<body>

<div class="a"><p>Hello World and all of your books.</p></div>

</body>

</html>

This topic is now closed to further replies.
  • Posts

    • Here's how to watch Summer Game Fest 2025 showcase today and what to expect by Pulasthi Ariyasinghe E3 as we know it might be dead, but Summer Game Fest is still going strong with its scheduled events in June. For five years now, Geoff Keighley has been organizing and hosting the video-game-centered platform to get developers and publishers a central location to have their reveal events. Summer Game Fest itself has its own massive show, and tonight, that kickoff event is going live with a whole bunch of announcements, updates, and more. The Summer Game Fest showcase hosted by Keighley is scheduled to go live at 2 PM PT | 5 PM ET | 10 PM BST later today, June 6. The live show is being hosted at the YouTube Theater in Los Angeles and is slated to run around two hours. To watch it online, viewers can tune into the show's YouTube (4K at 60 FPS), Twitch, Twitter, and Steam pages. Separate streams featuring American Sign Language and Descriptive Audio are available on YouTube as well. Not much information has been released regarding what gaming fans can expect to see at the event, but there are some clues and teasers to follow. Hideo Kojima is attending the event like always, meaning Death Stranding 2: On The Beach should get a brand-new trailer, unless it's a misdirect of some kind. The next entry in the Mafia franchise, The Old Country, the Soulslike action RPG Wuchang: Fallen Feathers, a surprise from the Splitgate 2 developer 1047 Games, a Fortnite-focused event from Epic Games, and new content for Atomic Heart should appear during the show. Being a rather long showcase, there should be plenty of other surprise reveals and announcements on stage, especially from major publishers like Ubisoft and 2K, which do not have their own dedicated summer events. Right after the main kickoff event, the Day of the Devs showcase will begin its own festivities at 4pm PT | 7pm ET. This is focused entirely on upcoming indie games. Later in the day, Devolver Digital and IO Interactive are hosting their own showcases. Here's the full calendar.
    • TIL you can report articles. reported as ad lol.
    • Paid US$798 for the 85" model which seemed like a better deal. Pretty nice TV.
    • Apple is making a scary move: a private company overchallenging a legit government and legislation. I am not a fan of democracy, but I am more scared of corporatism. The EU must take a strong stance now: Apple should comply with the law or face consequences, and it must do so immediately.
  • Recent Achievements

    • One Month Later
      EdwardFranciscoVilla earned a badge
      One Month Later
    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
  • Popular Contributors

    1. 1
      +primortal
      453
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      240
    4. 4
      ATLien_0
      196
    5. 5
      Xenon
      143
  • Tell a friend

    Love Neowin? Tell a friend!